웹캔버스

웹캔버스는 SVG 표준에 기반을 두고 개발된 벡터 방식의 웹 그래픽 저작 도구로서, 나모 웹에디터 5.1에 최적화되어 있는 그래픽 프로그램입니다. 웹캔버스를 이용하면 웹 문서에 사용되는 다양한 이미지를 쉽고 빠르게 제작할 수 있을 뿐만 아니라, 나모 웹에디터 5.1과 연계하여 웹 사이트에서의 그래픽 작업 전체를 보다 효과적으로 처리할 수 있습니다.

벡터 방식의 이미지

벡터 이미지는 비트맵 파일과 달리, 픽셀 단위의 점(화소)이 아닌 좌표값으로 이미지 정보를 기억하여 크기를 변경해도 그림이 깨지지 않습니다.

예) 벡터 이미지의
크기를 확대했을 때

예) 비트맵 이미지의
크기를 확대했을 때

웹캔버스로 작업한 결과물은 벡터 방식으로 처리됩니다. 따라서 벡터 이미지가 갖는 장점을 그대로 살려 웹 문서 편집의 효율성을 높일 수 있습니다.

SVG(Scalable Vector Graphic) 지원

SVG는 XML의 개방성, 상호운용성 등의 장점을 벡터 그래픽에 수용한 XML 그래픽 표준입니다. 웹캔버스는 SVG 표준에 기반을 두고 만들어진 프로그램으로, 작업한 결과물을 SVG 파일로 내보내어 저장할 수 있습니다.

나모 웹에디터 5.1에 최적화

웹캔버스로 작업한 결과물은 나모 웹에디터 5.1에서 사용할 수 있는 스마트 버튼 파일 형식(*.tng)으로 저장할 수 있습니다. 스마트 버튼은 나모 웹에디터에서 웹 문서를 작성할 때 사용되는 새로운 형태의 벡터 이미지입니다. 다른 벡터 이미지와 마찬가지로 그림 크기를 변경해도 그림이 깨지지 않으며, 웹 문서에 그림을 삽입한 상태에서 마치 글자를 편집하듯이 편집 창에서 바로 그림의 속성을 바꿀 수 있으므로 효율적으로 그림 편집 작업을 할 수 있습니다.

특히 웹캔버스로 만든 롤오버 스마트 버튼을 나모 웹에디터 5.1의 내비게이션 바에 사용하면 사이트 구조에 맞게 내비게이션 버튼이 자동으로 만들어지므로 웹 사이트의 내비게이션 바를 간단히 완성할 수 있습니다.

디자이너들이 버튼의 형태를 만들고 편집자들이 글자나 색깔만 바꿔 사용하는 형태의 공동 작업에 있어서도 스마트 버튼은 유용하게 사용될 수 있습니다.

웹캔버스 튜토리얼

나모 웹에디터 5 파워 플러스를 설치하면 프로그램 설치 폴더의 하위 폴더(WebEditor 5/doc/Tutorial)에 웹캔버스를 이용하여 버튼, 배너 등 웹 문서 제작에 필요한 요소를 만드는 과정을 제시한 튜토리얼을 추가로 제공합니다. 도움말의 튜토리얼에서 제공하는 문서 외에 좀 더 다양하게 스텝별로 정리된 단계를 따라하면서 웹캔버스 각 기능에 대한 사용법을 효과적으로 익힐 수 있습니다.

관련 항목


SVG

웹캔버스는 SVG 표준에 기반을 두고 만들어진 벡터 방식의 웹 그래픽 저작 도구로서 SVG 파일 형식을 지원합니다. 웹캔버스로 작업한 결과물은 SVG 파일로 내보내어 저장할 수 있습니다.

SVG(Scalable Vector Graphic)

SVG는 W3C(World Wide Web Consortium)에 의해 제안된 XML 그래픽 표준입니다. XML의 개방성, 상호운용성 등의 장점을 수용하여 그래픽의 활용 범위를 확대할 수 있도록 만들어진 벡터 그래픽입니다. SVG는 또 그라디언트, 애니메이션 및 각종 필터 효과와 같이 다양한 구성 요소를 포함하고 있으므로 보다 정밀한 디자인이 가능합니다.

SVG의 특징

SVG는 텍스트로 기술되는 그래픽입니다. 따라서 그래픽을 텍스트처럼 검색하고 인덱스 기능을 활용할 수 있으며, 다른 응용 프로그램에서도 SVG 문서를 쉽게 사용할 수 있습니다. 또한 XML과 SVG의 문서 객체 모델을 통해 모든 그래픽 요소에 접근할 수 있기 때문에 데이터베이스와 연동하여 동적으로 그래픽 문서를 생성할 수 있습니다. SVG는 운영체제와 장치에 관계없이 그래픽을 구현할 뿐만 아니라 뛰어난 인쇄 품질을 보장합니다.

SVG Viewer

SVG 파일을 웹 브라우저로 확인하려면, 웹 브라우저에 SVG 파일을 그려서 보여줄 수 있는 플러그인을 설치해야 합니다. SVG Viewer는 Adobe 웹 사이트에서 내려 받으실 수 있습니다.


스마트 버튼

웹캔버스에서 작업한 이미지는 기본값으로 스마트 버튼 파일 형식(*.tng)으로 저장됩니다. 스마트 버튼으로 저장한 이미지는 나모 웹에디터로 가져와서 웹 문서를 제작에 필요한 다양한 용도의 그림으로 사용할 수 있습니다.

스마트 버튼

스마트 버튼은 나모 웹에디터에서 웹 문서를 작성할 때 사용되는 새로운 형태의 벡터 이미지입니다. 벡터 방식으로 처리되어 크기를 변경해도 그림이 깨지지 않으며 웹 문서 안에서 바로 편집할 수 있기 때문에 작업하기 편리합니다. 특히 글자가 들어간 그림에 응용되어 한 번 사용한 그림을 간단하게 글자만 바꾸거나 색깔 등의 속성만 바꾸어 재사용할 수 있습니다.

스마트 버튼은 웹 문서에서 아래와 같은 다양한 용도로 사용될 수 있습니다.

  • 배너, 문단 제목 등에 사용
    스마트 버튼은 글자가 들어간 이미지를 만들 때 유용하게 사용됩니다. 특히 반복적으로 사용되는 문단 제목을 스마트 버튼으로 처리하면 손쉽게 텍스트를 바꿔 넣을 수 있기 때문에 편리합니다.

  • 장식용 표에 사용되는 표 제목으로 사용
    다양한 장식용 표를 만드는 데에도 스마트 버튼을 사용할 수 있습니다. 표 제목 스마트 버튼을 이용하면 아래와 같은 독특한 형태의 장식용 표를 쉽게 만들 수 있습니다.
    • 웹캔버스
    벡터형 이미지 제작 도구

  • 불릿, 수평선, 장식글 이미지로 사용
    그 밖에 장식글, 불릿, 수평선 이미지로도 사용할 수 있습니다. 스마트 버튼으로도 된 불릿, 수평선 그림 등을 사용하면 색깔이나 크기를 자유롭게 변경할 수 있기 때문에 내게 필요한 형태로 손쉽게 바꾸어 사용할 수 있습니다.
    • 원본 | 편집한 형태

  • 특수 폰트를 활용한 이미지 제작에 사용
    스마트 버튼을 이용하면 삽입된 글자가 그림으로 처리되기 때문에 기본 폰트가 아닌 특수한 폰트도 자유롭게 사용할 수 있습니다. 스마트 버튼에 들어가는 텍스트에 딩뱃 폰트를 사용하면 재미있는 모양의 버튼을 만들 수 있습니다. 딩뱃(dingbat)은 글자를 입력하듯이 그림을 입력할 수 있는 특수한 폰트를 말합니다.

롤오버 스마트 버튼

스마트 버튼을 롤오버 형태로 제작한 것을 롤오버 스마트 버튼이라고 합니다. 롤오버 스마트 버튼은 나모 웹에디터 5.1에서 웹 사이트의 내비게이션 바로 사용할 수 있습니다. 롤오버 스마트 버튼을 이용하면, 버튼 한 개 제작만으로 웹 사이트 전체의 내비게이션 바를 자동으로 처리할 수 있기 때문에 웹 사이트 제작 시간을 효과적으로 단축시킬 수 있습니다.


기본 작업 환경

웹캔버스는 여러 개의 창으로 이루어진 작업 환경을 제공합니다. 이러한 작업 환경은 여러 단계의 실행 과정을 거치지 않고 필요한 창에서 바로 명령을 실행하여 결과물에 적용시킬 수 있어서 그래픽 작업을 할 때 유용합니다. 웹캔버스는 편집 창과 작업 도구, 라이브러리(견본, 라이브러리), 속성 창, 레이어 창으로 구성되어 있습니다. 각 창은 사용자의 작업 특성에 맞추어 고정시키거나 띄어 놓고 사용할 수 있습니다.

편집 창 | 이미지를 새로 만들고 편집하는 작업 공간입니다.
도구 막대 | 기본 도구 막대 | 파일 열기, 저장하기 등의 기본 명령을 도구 막대 형태로 제공합니다.
 | 레이아웃 도구 막대 | 레이아웃과 관련된 명령을 도구 막대 형태로 제공합니다.
작업 도구와 도구 옵션 | 작업 도구 | 주요 개체의 생성과 편집에 관련된 도구들을 도구 단추 형태로 모아 놓은 도구 모음입니다.
 | 도구 옵션 | 현재 선택한 작업 도구의 세부 옵션을 표시해 줍니다.
라이브러리 창 | 견본 | 개체에 적용할 수 있는 색깔, 그라디언트, 패턴 탭으로 구성된 라이브러리 창입니다.
 | 라이브러리 | 개체에 적용할 수 있는 스타일과 여러 형태의 모양을 모아 놓은 라이브러리 창입니다.
속성 창 | 속성 창은 현재 선택한 개체의 속성을 보여 줍니다. 개체에 효과를 적용하거나 속성을 변경할 수 있습니다. 칠, 테두리, 변형, 효과, 글자 탭으로 구성되어 있습니다.
레이어 창 | 레이어 창은 레이어와 레이어에 삽입된 개체, 시트 정보를 보여 줍니다. 레이어 탭에서 혼합 모드와 불투명도를 지정할 수 있습니다.


나모 웹에디터와 웹캔버스

웹캔버스는 나모 웹에디터와 효과적으로 연동되어 필요에 따라 두 프로그램을 오가며 작업할 수 있습니다.

웹캔버스에서 제작한 스마트 버튼

웹캔버스에서 제작한 스마트 버튼은 다음과 같은 방법으로 나모 웹에디터에 삽입할 수 있습니다.

  • 웹캔버스 편집 창에서 작업한 버튼을 선택하여 마우스로 끌어서 나모 웹에디터의 편집 창에 가져다 놓으면 버튼이 편집 창에 삽입됩니다.

    • 웹캔버스 편집 창에 있는 스마트 버튼을 마우스로 누른 채 끌어서 나모 웹에디터에 추가하려면, 웹캔버스의 선택 [image] 도구를 이용하여 원하는 개체를 먼저 선택해야 합니다.
  • 웹캔버스에서 만든 버튼은 <Ctrl+C>로 복사하여 웹에디터의 편집 창에 <Ctrl+V>로 손쉽게 붙여 넣을 수 있습니다.

    • 웹캔버스에서 복사한 개체를 웹에디터 편집 창에 붙여넣을 경우 .GIF로 저장하면 이미지가 많이 손상됩니다. 웹에디터 편집 창에서 그림을 선택한 뒤 바로가기 메뉴의 [그림 > 그림 형식 변환]을 통해 이미지를 JPG로 재저장하면 이미지 손상을 줄일 수 있습니다.
  • 웹캔버스 편집 창에서 작업한 버튼을 선택하여 마우스로 끌어서 나모 웹에디터의 리소스 관리자 창의 스마트 버튼 탭에 가져다 놓으면 버튼이 리소스 관리자에 추가됩니다.
  • 웹캔버스에서 저장한 스마트 버튼을 리소스 관리자의 [가져오기] 메뉴를 이용하여 추가할 수 있습니다.
    나모 웹에디터에서 사용하기
  • 나모 웹에디터의 리소스 관리자에 이미 추가되어 있는 스마트 버튼을 웹캔버스에서 편집하면 리소스 관리자의 버튼이 자동으로 업데이트 됩니다.

나모 웹에디터에서 스마트 버튼의 편집

나모 웹에디터 편집 창에 삽입한 스마트 버튼을 더블 클릭하면 웹캔버스가 자동으로 실행되어 버튼을 편집할 수 있습니다.

웹캔버스에서 편집 작업을 마친 뒤에 다음과 같은 방법으로 스마트 버튼을 업데이트 할 수 있습니다.

  • 웹캔버스에서 [파일 > 저장하기]를 선택하면 나모 웹에디터의 스마트 버튼이 업데이트 됩니다.
  • 웹캔버스에서 [파일 > 복사본 저장하기]를 선택하면 나모 웹에디터의 스마트 버튼을 업데이트 하지 않고 편집한 버튼을 다른 이름으로 저장합니다.
  • 웹캔버스를 종료하면 스마트 버튼을 저장할 것인지 묻는 대화 상자가 나타나고 예 단추를 누르면 스마트 버튼이 업데이트 됩니다.


도움말 보기

도움말 보기

도움말 찾기

도움말 인쇄

도움말 보기

웹캔버스 사용 중에 도움말을 확인하려면 다음 중 한 가지 방법을 이용합니다.

  • 메뉴에서 [도움말 > 웹캔버스 도움말]을 선택합니다.
  • 도움말 단축키 <F1>키를 누릅니다.
  • 대화 상자가 열린 상태에서 <F1>키를 누르면 해당 도움말을 볼 수 있습니다.

도움말 찾기

찾으려는 도움말의 주제를 알고 있거나 도움말 전체를 훑어 보려고 할 때는 목차 탭을 이용합니다.

  1. 목차 탭에서 책 아이콘의 [+] 표시를 클릭하여 하위 목차를 엽니다.
  2. 원하는 목차 항목을 선택합니다. 도움말 내용이 표시됩니다.

관련 항목이 있을 경우 도움말 내용 아래 '관련 항목' 링크를 제공합니다. '관련 항목'을 누른 다음, 팝업 메뉴에서 원하는 항목을 선택하면 해당 도움말로 이동합니다.

색인어 또는 관련 단어를 입력하여 원하는 도움말을 찾으려면 색인 탭 또는 검색 탭을 이용합니다.

  1. 색인어를 입력하려면 색인 탭을, 관련 단어를 입력하려면 검색 탭을 엽니다.
  2. 검색할 단어 입력에 단어를 입력하고 항목 목록 단추를 누릅니다. 도움말 목록이 창에 표시됩니다.
  3. 목록에서 원하는 항목을 선택하고 항목 보기 단추를 누릅니다. 도움말 내용이 표시됩니다.

검색 탭에서 구문을 검색어로 입력할 때에는 큰 따옴표(" ")로 구문을 묶습니다.
(예) HTML 태그 정리 기능에 관한 내용을 찾으려면 "HTML 태그 정리 기능"을 입력합니다.

검색어 입력에 사용할 수 있는 연산자

    AND | '차트 AND 데이터베이스'를 입력하면 두 단어를 모두 포함한 항목을 찾습니다.
OR | '차트 OR 데이터베이스'를 입력하면 두 단어 중 하나 또는 두 단어 모두를 포함한 항목을 찾습니다.
NEAR | '차트 NEAR 데이터베이스'를 입력하면 두 단어가 서로 근접해 있는 항목을 찾습니다.
NOT | '차트 NOT 데이터베이스'를 입력하면 '차트'는 포함하지만 '데이터베이스'는 포함하지 않는 항목을 찾습니다.

도움말 인쇄

필요에 따라 도움말 내용을 인쇄하여 볼 수 있습니다.

  1. 목차 탭에서 원하는 항목을 선택합니다.
  2. 도움말 창에서 인쇄 단추를 누릅니다.
  3. 다음 중 한 가지 방법을 이용합니다.
    • 현재 도움말 창에 나타난 항목을 인쇄하려면 항목 인쇄 대화 상자에서 현재 항목 인쇄를 선택하고 확인 단추를 누릅니다. 목차 탭이 숨겨져 있는 경우에는 항목 인쇄 대화 상자가 나타나지 않습니다.
    • 여러 항목을 한꺼번에 인쇄하려면 항목 인쇄 대화 상자에서 현재 제목에 포함된 모든 항목 인쇄를 선택하고 확인 단추를 누릅니다.

목차 탭이 있는 왼쪽 창은 숨기거나 나타나게 할 수 있습니다. 목차 탭이 보이지 않을 때는 표시 단추를 눌러서 표시합니다.


도움말 구성

웹캔버스 도움말

내용별 구성

관련 항목 표시

웹캔버스 도움말

도움말에서는 웹캔버스를 사용하기 위해 필요한 기술적인 내용을 찾아볼 수 있습니다. 웹캔버스 사용 중에 도움말을 확인하려면 <F1>키를 누르십시오. 도움말 각 탭의 기능은 다음과 같습니다.

  • 목차 탭 - 도움말 목차를 주제별로 보여 줍니다. 찾으려는 도움말 주제를 알고 있을 때 사용합니다.
  • 색인 탭 - 도움말의 색인어 목록을 보여 줍니다. 색인어를 입력하거나 색인 목록에서 직접 선택하여 도움말을 찾을 수 있습니다.
  • 검색 탭 - 관련된 단어를 입력하여 해당 도움말을 검색합니다. 주제와 색인어가 불분명한 도움말을 검색을 통해 찾으려 할 때 사용합니다.
  • 즐겨찾기 탭 - 이미 찾은 도움말을 자주 볼 필요가 있을 때 즐겨찾기 탭에 등록하여 사용할 수 있습니다.

내용별 구성

웹캔버스 도움말의 내용은 다음과 같이 구성되어 있습니다.

  • 웹캔버스 소개
    웹캔버스에 대한 소개와 도움말 사용법을 설명합니다.
  • 기본 기능 둘러보기
    각 작업 창에 대한 기본 기능과 사용자 설정에 대해 설명합니다.
  • 메뉴별 기능 둘러보기
    메뉴별 기능에 대한 개괄적인 설명을 제공합니다.
  • 단계별 사용법
    웹캔버스의 사용법을 작업 단계별로 나누어 설명합니다.
  • 단축키 목록
    단축키 목록과 편집 관련 팁을 제공합니다.
  • 튜토리얼
    스텝별로 따라하면서 기능을 익힐 수 있는 튜토리얼을 제공합니다.

관련 항목 표시

웹캔버스 도움말은 HTML 문서로 작성되어 도움말 내용 중 하이퍼링크로 표시된 부분을 클릭하면 해당 도움말로 이동합니다. 단, 웹 사이트로 연결된 하이퍼링크의 내용은 인터넷에 접속된 상태에서만 확인하실 수 있습니다.

도움말 내용 아래 '관련 항목'을 누른 다음, 팝업 메뉴에서 원하는 항목을 선택하면 해당 도움말로 이동할 수 있습니다.


도움말 사용자 설정

도움말 창 크기 변경

도움말 글꼴 변경

즐겨찾기 등록

도움말 창 크기 변경

웹캔버스 도움말 창 크기의 기본값은 너비 420 픽셀, 높이 480 픽셀입니다. 그러나 사용자가 도움말 창 크기를 변경하면 이후부터는 변경된 창 크기로 도움말이 표시됩니다.

도움말 창에서 숨기기 단추를 누르면 도움말 목차, 색인, 검색, 즐겨찾기 탭이 있는 왼쪽 창이 숨겨지고 도움말 항목 창만 표시됩니다.

도움말 글꼴 변경

  1. 도움말 창에서 [옵션 > 인터넷 옵션]을 선택합니다.
  2. 인터넷 옵션 대화 상자 일반 탭에서 사용자 서식을 단추를 누릅니다.
  3. 사용자 서식 대화 상자에서 웹 페이지에 지정된 글꼴 스타일 무시를 선택하고 확인 단추를 누릅니다.
  4. 일반 탭에서 글꼴 단추를 누릅니다.
  5. 글꼴 대화 상자에서 원하는 옵션을 선택한 다음 확인 단추를 누릅니다.
  6. 인터넷 옵션 대화 상자에서 확인 단추를 누릅니다.

웹캔버스 도움말은 사용자 컴퓨터에 설치된 웹 브라우저와 글꼴, 글자색, 배경색 설정을 공유합니다. 따라서 웹캔버스 도움말 창에서 사용되는 글꼴, 글자색, 배경색을 변경하면 사용자 브라우저의 웹 문서 모양도 변경됩니다. 브라우저에서 사용 가능한 옵션에 대한 정보는 해당 브라우저 도움말을 참고하시기 바랍니다.

휠마우스를 사용할 경우 <Ctrl>키를 누른 채 휠을 앞이나 뒤로 굴리면 도움말에 사용된 글자 배율을 확대 또는 축소시킬 수 있습니다.

즐겨찾기 등록

자주 확인하는 도움말은 즐겨찾기에 등록해 놓고 이용할 수 있습니다. 현재 표시된 도움말 항목을 즐겨찾기에 추가하려면, 즐겨찾기 탭에서 추가 단추를 누르십시오.


기본 도구 막대

기본 도구 막대는 문서 열기, 저장, 복사, 인쇄 등 기본적인 작업을 수행하는 도구 단추를 모아놓은 것입니다. 웹캔버스의 메뉴 막대 아래에 기본값으로 나타나며 [보기 > 도구 막대 > 기본 도구]를 선택 해제하여 보이지 않게 할 수도 있습니다.

각 도구 단추의 기능

새 문서 | 새 문서 새 문서를 만듭니다. 새 문서 대화 상자에서 문서의 크기, 색깔을 지정할 수 있습니다.
열기 | 열기 이미 있는 파일로부터 문서를 엽니다.
저장 | 저장하기 현재 작업 중인 문서를 저장합니다.
자르기 | 자르기 선택한 내용을 잘라서 클립보드에 복사합니다.
복사하기 | 복사하기 선택한 내용을 클립보드에 복사합니다.
붙이기 | 붙이기 클립보드의 내용을 삽입합니다.
돌이킴 | 돌이킴 바로 전에 수행한 작업을 돌이킵니다.
되돌이킴 | 되돌이킴 바로 전에 돌이킨 작업을 원래대로 복구합니다.


레이아웃 도구 막대

레이아웃 도구 막대는 여러 개체의 크기와 위치를 변경하여 레이아웃을 정리하는데 사용되는 도구 단추를 모아놓은 것입니다. 레이아웃 도구 막대가 보이지 않을 때는 [보기 > 도구 막대 > 레이아웃 도구]를 선택합니다.

각 도구 단추의 기능

그룹 만들기 | 그룹 만들기 선택한 개체들을 하나의 그룹으로 묶습니다. 그룹으로 묶으면 여러 개의 개체를 하나의 개체처럼 다룰 수 있습니다.
그룹 풀기 | 그룹 풀기 묶은 그룹을 풉니다. 그룹을 풀면 각각의 개체들을 개별적으로 다룰 수 있습니다.
컴파운드 패스 만들기 | 컴파운드 패스 만들기 선택한 개체들의 교집합 부분을 투명하게 처리하여 묶습니다.
컴파운드 패스 풀기 | 컴파운드 패스 풀기 컴파운드 패스 만들기로 묶은 개체들을 원래 상태로 되돌립니다.
맨 앞으로 가져오기 | 맨 앞으로 가져오기 선택한 개체를 맨 앞으로 보냅니다. 맨 앞으로 가져오기를 실행한 개체는 레이어 목록에서 제일 위로 이동합니다.
앞으로 가져오기 | 앞으로 가져오기 선택한 개체를 한 단계 앞으로 보냅니다. 앞으로 가져오기를 실행한 개체는 레이어 목록에서 한 단계 위로 이동합니다.
뒤로 보내기 | 뒤로 보내기 선택한 개체를 한 단계 뒤로 보냅니다. 뒤로 보내기를 실행한 개체는 레이어 목록에서 한 단계 아래로 이동합니다.
맨 뒤로 보내기 | 맨 뒤로 보내기 선택한 개체를 맨 뒤로 보냅니다. 맨 뒤로 보내기를 실행한 개체는 레이어 목록에서 제일 아래로 이동합니다.
수평 정렬 |  | 왼쪽 선택한 개체들을 기준 개체의 왼쪽에 맞춥니다.
 |  | 가운데 선택한 개체들을 기준 개체의 가운데에 맞춥니다.
 |  | 오른쪽 선택한 개체들을 기준 개체의 오른쪽에 맞춥니다.
수직 정렬 |  | 위쪽 선택한 개체들을 기준 개체의 위쪽에 맞춥니다.
 |  | 중간 선택한 개체들을 기준 개체의 중간에 맞춥니다.
 |  | 아래쪽 선택한 개체들을 기준 개체의 아래쪽에 맞춥니다.
수평 배분 |  | 왼쪽 양쪽 끝에 위치한 개체의 왼쪽을 기준으로 나머지 개체들의 간격을 배분합니다.
 |  | 가운데 양쪽 끝에 위치한 개체의 가운데를 기준으로 나머지 개체들의 간격을 배분합니다.
 |  | 오른쪽 양쪽 끝에 위치한 개체의 오른쪽을 기준으로 나머지 개체들의 간격을 배분합니다.
수직 배분 |  | 위쪽 양쪽 끝에 위치한 개체의 위쪽을 기준으로 나머지 개체들의 간격을 배분합니다.
 |  | 중간 양쪽 끝에 위치한 개체의 중간을 기준으로 나머지 개체들의 간격을 배분합니다.
 |  | 아래쪽 양쪽 끝에 위치한 개체의 아래쪽을 기준으로 나머지 개체들의 간격을 배분합니다.
수평 간격 맞추기 | 수평 간격 맞추기 개체간의 수평 간격을 동일하게 배분합니다.
수직 간격 맞추기 | 수직 간격 맞추기 개체간의 수직 간격을 동일하게 배분합니다.
같은 너비로 맞추기 | 같은 너비로 맞추기 선택한 개체의 너비를 기준 개체와 동일하게 합니다.
같은 높이로 맞추기 | 같은 높이로 맞추기 선택한 개체의 높이를 기준 개체와 동일하게 합니다.
같은 크기로 맞추기 | 같은 크기로 맞추기 선택한 개체의 크기를 기준 개체와 동일하게 합니다.

제일 마지막에 선택한 개체가 정렬 기준이 됩니다. 개체 전체를 마우스로 누른 채 끌어서 한꺼번에 선택했을 때는 레이어 목록에서 제일 아래에 있는 개체가 정렬 기준이 됩니다.


 선택 도구 직접 선택 도구 펜 도구 글자 도구 원 도구 사각형 도구 회전 도구 크기 조절 도구 칠 속성 복사 도구 그라디언트 도구 내보내기 영역 도구 패스 자르기 도구 화면 이동 도구 확대/축소 도구 채우기 단추 테두리 단추 색깔 단추 그라디언트 단추 속성 없애기 단추 기본값으로 채우기와 테두리 바꾸기 조절점 추가 도구 조절점 삭제 도구 조절점 변환 도구 글자 패스 도구 다각형 도구 별 도구 둥근 사각형 도구 타원 도구 기울이기 도구 칠 속성 적용 도구

작업 도구

[창 > 작업 도구]

작업 도구는 개체를 생성하거나 편집하는데 쓰이는 도구들의 모음입니다. 작업 도구가 보이지 않을 때는 메뉴에서 [창 > 작업 도구]를 선택합니다. 일부 작업 도구에는 도구 옵션이 있습니다.

각 도구를 누르면 해당 도구에 대한 설명이 나타납니다.

작업 도구의 하위 도구를 선택하려면 해당 도구를 마우스로 잠시 누르거나 오른쪽 삼각형을 누릅니다. 하위 도구 목록의 오른쪽 삼각형을 누르면 해당 작업 도구가 별도의 막대로 분리됩니다.


도구 옵션

[보기 > 도구 막대 > 도구 옵션]

도구 옵션은 작업 도구를 선택했을 때 표시되는 세부 항목입니다. 도구 옵션이 보이지 않을 때는 메뉴에서 [보기 > 도구 막대 > 도구 옵션]을 선택합니다. 작업 도구에 따라 세부 항목이 없을 수 있습니다.

작업 도구 | 도구 옵션
선택 | 기본 선택 영역 선택 영역을 개체를 포함하도록 사각형으로 표시합니다. 변형 선택 영역 선택 영역을 개체에 맞게 변형합니다.
타원 | 패스로 만들기 패스로 만들기 옵션을 선택하면 타원 도형을 패스로 그립니다.
다각형 | 꼭지점 개수 꼭지점 개수를 입력하면 원하는 다각형을 그릴 수 있습니다. 기본값은 6입니다.
별 | 꼭지점 개수 꼭지점 개수를 입력하면 별 모양을 원하는 형태로 그릴 수 있습니다. 기본값은 5입니다. 안쪽 반지름 안쪽 반지름의 길이를 바깥쪽 반지름에 대한 비율 또는 픽셀로 지정합니다.
사각형 | 패스로 만들기 패스로 만들기 옵션을 선택하면 사각형 도형을 패스로 그립니다.
둥근 사각형 | 호 X 모서리 원호의 너비를 픽셀 또는 사각형 너비의 1/2에 대한 비율로 지정합니다. 기본값은 50 %입니다. 호 Y 모서리 원호의 높이를 픽셀 또는 사각형 높이의 1/2에 대한 비율로 지정합니다. 기본값은 50 %입니다. 패스로 만들기 패스로 만들기 옵션을 선택하면 둥근 사각형 도형을 패스로 그립니다.
회전 기울이기 뒤집기 크기조절 | 테두리 두께 함께 조절 선택하면 개체를 변형할 때 테두리의 두께도 함께 조절합니다. 그라디언트 변형 선택하면 개체를 변형할 때 그라디언트도 함께 변형합니다. 패턴 변형 선택하면 개체를 변형할 때 패턴도 함께 변형합니다.


속성 창 소개

속성 창을 이용하면 개체의 속성과 개체에 적용된 효과 목록을 확인하고 수정할 수 있습니다. 메뉴에서 [창 > 속성]을 선택하면 속성 창이 열립니다. 속성 창은 칠, 테두리, 변형, 효과, 글자 탭으로 구성되어 있습니다. 창 설정을 변경하여 창을 고정시키거나 띄워 놓고 사용할 수 있습니다.
  • 칠 탭
    개체의 채우기와 테두리 칠 속성을 지정하거나 변경할 수 있습니다.
  • 테두리 탭
    테두리와 관련된 세부 속성을 확인하고 수정할 수 있습니다. 테두리 모양, 패스의 시작점과 끝점의 단면 모양, 모서리 모양 등 정밀한 테두리 편집 작업이 가능합니다.
  • 변형 탭
    개체의 위치와 크기 정보를 확인하고 개체를 회전시키거나 좌우 상하로 뒤집어서 형태를 변형시킬 수 있습니다.
  • 효과 탭
    개체에 적용한 효과를 확인하고 편집할 수 있습니다. 적용한 효과의 순서를 바꾸거나 일시적으로 선택 해제하여 편집 형태를 비교해 보면서 작업할 수 있으며, [image] 단추를 누르고 하위 메뉴를 이용할 수 있습니다.
  • 글자 탭
    글자 개체의 내용과 속성을 확인하거나 편집할 수 있습니다. 글자 탭은 글자 개체가 선택되었을 때만 활성화됩니다.


칠

칠

칠 탭의 기능

칠

웹캔버스에서 만든 도형, 모양, 글자, 패스 등의 각 개체들은 채우기와 테두리로 구성됩니다.

예) 사각형 개체의 채우기와 테두리

채우기와 테두리는 각각의 칠 속성을 갖습니다. 개체의 채우기와 테두리는 각각을 3가지 형태(색깔, 그라디언트, 패턴)로 칠할 수 있습니다. 스타일을 이용하면 미리 지정된 속성으로 채우기와 테두리를 한꺼번에 칠할 수도 있습니다.

예) 여러 가지 칠하기 형태

칠 탭의 기능

속성 창의 칠 탭에서는 개체의 채우기와 테두리 칠 속성을 확인하고 변경할 수 있습니다.

  • 채우기
    개체의 채우기 칠 속성을 확인하거나 변경할 때 사용합니다. 펼침 목록 단추를 누르면 색깔, 그라디언트, 패턴 탭에서 원하는 항목을 선택하여 적용할 수 있습니다.
  • 테두리
    개체의 테두리 칠 속성을 확인하거나 변경할 때 사용합니다. 펼침 목록 단추를 누르면 색깔, 그라디언트, 패턴 탭에서 원하는 항목을 선택하여 적용할 수 있습니다.
  • 단추 기능
     | 기본색 적용 채우기 또는 테두리를 기본 색깔인 흰색(#FFFFFF)으로 바꿉니다.
 | 기본 그라디언트 적용 채우기 또는 테두리를 기본 그라디언트로 바꿉니다.
칠 속성 없애기 | 칠 속성 없애기 채우기 또는 테두리의 칠 속성을 없앱니다.
칠 속성 초기화 | 칠 속성 초기화 채우기/테두리 칠 속성을 기본값으로 변경합니다. 채우기 칠 속성 기본값은 흰색(#FFFFFF), 테두리 칠 속성 기본값은 검정색(#000000)입니다.
채우기와 테두리 바꾸기 | 채우기와 테두리 바꾸기 채우기와 테두리 칠 속성을 서로 바꿉니다.
  • 채우기 방법

    • 겹치는 부분이 있는 다각형을 어떤 방법으로 칠하게 할 것인지 지정합니다.

    겹친 부분 지우기(Even-Odd) : 겹친 부분을 지웁니다.
    합치기(Non-Zero Winding) : 겹친 부분을 합쳐서 처리합니다.

    예) 겹친 두 개체의 컴파운드 패스 적용

    단, 패스의 방향을 다르게 하여 그린 개체들을 컴파운드 패스로 만든 뒤 합치기를 적용하면, 겹친 부분 지우기(Even-Odd)와 같이 됩니다.

    예) 패스의 방향을 다르게 한 개체의 컴파운드 패스 적용(합치기)

  • 채우기 위에 테두리
    테두리를 채우기 영역 위에 겹쳐서 그릴 것인지, 채우기 영역 아래쪽에 그릴 것인지 선택합니다.

    예) 테두리 두께가 10인 사각형 개체에서

  • 앤티 앨리어싱

    • 개체에 앤티 앨리어싱(Anti Aliasing)을 적용하여 가장자리 부분이 부드럽게 보이도록 처리합니다.


테두리

테두리

테두리 탭의 기능

테두리

웹캔버스에서 만든 도형, 모양, 글자, 패스 등 각 개체들은 채우기와 테두리로 구성됩니다. 채우기와 테두리는 기본적으로 각각의 칠 속성을 가지며, 테두리는 칠 속성 이외에도 테두리 두께, 모서리 한계, 모양 등의 추가 속성을 가집니다.

예) 여러 가지 테두리

테두리 탭의 기능

속성 창의 테두리 탭에서는 테두리 두께, 모서리 모양, 시작점과 끝점의 모양 등 테두리 속성을 지정할 수 있습니다.

  • 두께
    개체의 테두리 두께를 픽셀 단위로 설정합니다.
  • 단면 모양
    테두리의 단면 모양을 선택합니다.

    접한 단면(Butt Linecap)
    패스의 끝점에서 단면이 끝납니다.

    둥근 단면(Round Linecap)
    패스의 끝점을 패스 두께의 반지름 크기만큼 동그랗게 처리합니다.

    돌출 단면(Square Linecap)
    패스의 끝점을 패스 두께만큼 바깥으로 튀어나오게 처리합니다.

    예) 여러 가지 단면 모양
  • 모서리 한계
    개체의 모서리 한계를 테두리 두께의 몇 배로 제한할 것인지를 설정합니다. 모나게를 선택했을 때에만 활성화됩니다.
  • 모서리 모양
    테두리의 모서리 모양을 선택합니다.

            •

    모나게(Miter Linejoin)
    모서리를 각지게 처리합니다. 한계를 지정하여 꺾이는 정도를 조절합니다.

    모서리 깎기(Bevel Linejoin)
    모서리를 경사지게 처리합니다.

    둥글게(Round Linejoin)
    모서리를 둥글게 처리합니다.

    예) 여러 가지 모서리 모양
  • 시작/끝

    • 패스의 시작점과 끝점의 모양과 크기를 선택합니다. 첫 번째 펼침 목록에서 모양을, 두 번째 펼침 목록에서 크기를 선택합니다.

    예) 패스의 시작/끝점의 모양

  • 모양
    펼침 목록 단추를 눌러 원하는 모양을 선택합니다. 패스를 실선 또는 다양한 점선 모양으로 바꿀 수 있습니다.

            •

    실선

    점선

    짧은 대시

    중간 대시

    대시 - 점

    대시 - 점 점

    긴 대시

    긴 대시 - 점

    긴 대시 - 점 점


변형

변형

변형 탭의 기능

변형

편집 창에 만든 여러 개체들은 그 형태를 여러 가지로 변형시킬 수 있습니다. 변형이란 개체의 위치나 크기, 모양 등을 변경하는 것을 가리킵니다. 작업 도구를 이용하여 편집 창에서 마우스 동작으로 개체를 변형시키거나, 변형 탭에서 직접 숫자를 입력하여 작업할 수 있습니다. 픽셀이나 퍼센트 단위의 정확한 작업이 필요할 때 변형 탭을 이용합니다.

예) 개체의 여러 가지 변형 형태

변형 탭의 기능

변형 탭에서는 개체의 위치와 크기 정보를 확인하거나 변경하고, 개체를 기울이거나 회전시켜 모양을 바꿀 수 있습니다. 증감 단추를 누르거나 숫자를 입력하면 속성이 변경됩니다. 숫자를 입력할 경우에는, <Enter>키를 누르거나 커서를 입력 양식 바깥으로 이동시킬 때 편집 창에 반영됩니다. 개체의 위치와 크기 정보는 선택 영역을 기준으로 표시합니다.

  • 정보
    • X | 개체의 X 좌표값을 표시합니다. 선택 영역을 기준으로 개체의 위치 정보를 표시합니다.
Y | 개체의 Y 좌표값을 표시합니다.
W | 개체의 너비를 표시합니다. 단위는 픽셀입니다.
H | 개체의 높이를 표시합니다. 단위는 픽셀입니다.

  • 변형

    너비 변경
    개체의 너비를 변경합니다. 개체의 처음 너비에 대한 배율(%)로 지정합니다.

    예) 개체의 너비를 200%로 확대했을 때

    높이 변경
    개체의 높이를 변경합니다. 개체의 처음 높이에 대한 배율(%)로 지정합니다.

    예) 개체의 높이를 50%로 축소했을 때

    회전
    개체를 시계 방향으로 기울입니다. 각도 단위로 지정합니다.

    예) 개체를 45도 회전시켰을 때

    X축으로 기울이기
    개체를 X축으로 기울입니다. 각도 단위로 지정합니다.

    예) 개체를 X축으로 45도 기울였을 때

    Y축으로 기울이기
    개체를 Y축으로 기울입니다. 각도 단위로 지정합니다.

    예) 개체를 Y축으로 45도 기울였을 때


효과

효과

효과 탭의 기능

효과

효과란 이미지에 특수한 처리를 하여 이미지를 더욱 돋보이게 하는 것을 가리킵니다. 입체감을 주거나 부드럽게 표현할 때 주로 사용됩니다.

예) 베벨 효과와 그림자 효과를 이용한 이미지 편집

효과 탭의 기능

효과 탭을 이용하면 웹 문서에 삽입하는 이미지에 특히 자주 사용되는 4가지 효과(가우시안 블러, 그림자, 베벨, 확산 효과)를 선택적으로 개체에 적용할 수 있습니다. 하나의 개체에 두 가지 이상의 효과를 겹쳐 적용할 수도 있으며, 이미 적용된 효과를 목록으로 확인할 수 있습니다.

효과 목록에서 특정 항목의 선택을 해제하면 해당 항목이 적용되지 않은 상태의 모습을 편집 창에 보여주므로 효과 적용 전후를 비교하면서 작업할 수 있습니다. 효과 목록에서 항목을 더블 클릭하면 해당 효과 대화 상자에서 효과를 편집할 수 있습니다.

  • 하위 메뉴
    • 편집하기 | 효과 목록에서 선택한 효과를 확인하거나 편집합니다.
삭제하기 | 효과 목록에서 선택한 효과를 삭제합니다.
  • 단추 설명
    위로 | 위로 선택한 효과의 적용 순서를 올립니다. 효과의 적용 순서에 따라 그 결과가 다르게 나타납니다. 목록에서 위에 있는 효과가 우선적으로 적용됩니다.
아래로 | 아래로 선택한 효과의 적용 순서를 내립니다.
효과 추가 | 효과 추가하기 개체에 새로운 효과를 추가할 수 있습니다. 단추를 누르면 적용할 수 있는 효과 목록이 나타납니다. 가우시안 블러 효과 개체에 가우시안 블러 효과를 적용하여 부드럽게 표현합니다. 그림자 효과 개체에 그림자 효과를 적용하여 입체적으로 보이게 합니다. 베벨 효과 개체에 베벨 효과를 적용하여 튀어 나와 보이게 합니다. 확산 효과 개체에 확산 효과를 적용하여 색깔이 번져 보이게 합니다. 밝기/대비 개체에 밝기와 대비를 조절합니다. 색상/채도 개체에 색상과 채도를 조절합니다.
효과 편집 | 효과 편집하기 선택한 효과를 확인하거나 편집합니다. 단추를 누르면 해당 효과 대화 상자가 나타납니다.
효과 삭제 | 효과 삭제하기 선택한 효과를 삭제합니다.


글자

글자

글자 탭의 기능

글자

웹캔버스에서 글자는 글자 개체와 글자 패스 개체를 이용하여 입력할 수 있습니다. 글자 개체는 직선 형태의 글자를 입력할 때 사용하고, 글자 패스 개체는 곡선 형태의 글자를 입력할 때 사용합니다.

예) 글자 개체와 글자 패스 개체

글자 탭의 기능

글자 탭에서는 글자 개체 또는 글자 패스 개체의 속성을 확인하고 변경할 수 있습니다.

  • 글꼴
    개체에 적용할 글꼴을 선택합니다.
  • 글자 크기
    글자 크기를 포인트 단위로 지정합니다.
  • 글자 모양
    • 진하게 | 진하게 글자를 두껍게 합니다.
이탤릭 | 이탤릭 글자를 기울어지게 합니다.
가로 쓰기 | 가로 쓰기 글자를 가로 방향으로 씁니다.
세로 쓰기 | 세로 쓰기 글자를 세로 방향으로 씁니다.
  • 내용
    글자 내용을 입력합니다. 글자 개체인 경우, <Ctrl+Enter>키를 누르면 여러 줄을 입력할 수 있습니다. SVG에서는 멀티라인을 지원하지 않기 때문에, 여러 줄로 입력한 내용을 SVG로 내보내면 1줄씩 나뉘어 출력됩니다.
  • 자간
    글자 간격을 조절합니다.
  • 장평
    글자의 가로와 세로 비율을 조절합니다.
  • 줄 간격
    글자를 입력할 때 줄 바꿈을 하여 여러 줄을 쓸 경우에는 <Ctrl+Enter>키를 누릅니다. 줄 간격은 줄 바꿈한 글자들의 줄 간격을 %로 조절합니다.
  • 글자 패스 시작 위치
    글자 패스 개체에서 글자의 시작 위치를 지정합니다. 0%일 경우 기준점에서 글자가 시작되고, 수치가 커질수록 글자의 시작 위치가 기준점으로부터 멀어집니다.

    • 예) 글자 패스 시작 위치를 0%로 지정했을 때

    예) 글자 패스 시작 위치를 30%로 지정했을 때


견본 창 소개

견본 창은 개체를 여러 가지 형태로 칠하기 위해 필요한 요소들을 모아놓은 것으로서 색깔, 그라디언트, 패턴 라이브러리로 구성됩니다. 견본 창에 있는 3가지 라이브러리를 이용하여 개체를 여러 가지 형태로 칠할 수 있습니다.

  • 색깔
    개체에 색깔을 적용할 때 사용합니다. 단추를 누르면 색깔 라이브러리를 관리하기 위한 하위 메뉴가 나타납니다.
  • 그라디언트 탭
    개체에 여러 가지 형태의 그라디언트를 적용할 때 사용합니다. 단추를 누르면 그라디언트 라이브러리를 관리하기 위한 하위 메뉴가 나타납니다.
  • 패턴 탭
    패턴을 선택하여 개체에 무늬를 입힐 때 사용합니다. 단추를 누르면 패턴 라이브러리를 관리하기 위한 하위 메뉴가 나타납니다.

현재 열려 있는 탭은 아이콘과 이름이 표시되며, 나머지 탭은 아이콘만 표시됩니다.


색깔

색깔

색깔 탭의 기능

색깔

이미지를 만들고 편집하는 데 있어서 색깔은 가장 중요한 요소입니다. 웹캔버스는 사용자가 자신에게 필요한 색깔을 효율적으로 관리하여 사용할 수 있도록 색깔 라이브러리를 제공합니다. Windows용 색깔 라이브러리뿐만 아니라 Macintosh용, 회색 음영, 웹 세이프 색깔 라이브러리를 제공하며, 자주 사용하는 색깔을 모아서 자신만의 색깔 라이브러리로 등록할 수 있도록 라이브러리 추가 기능을 지원합니다.

예) 색깔을 이용한 개체 칠하기

색깔 탭의 기능

색깔 탭에는 색깔 라이브러리에 등록된 색깔들이 표시됩니다. 색깔을 더블 클릭하면 색깔 편집 대화 상자의 색깔 스펙트럼을 이용하여 원하는 색깔로 변경할 수 있습니다.

  • 하위 메뉴
    편집하기 | 선택한 색깔을 색깔 편집 대화 상자에서 편집합니다.
추가하기 | 라이브러리에 새로운 색깔을 추가합니다. 색깔 편집 대화 상자에서 원하는 색깔을 선택합니다.
채우기에서 색깔 추가하기 | 현재 사용 중인 채우기 단추 색깔을 라이브러리에 추가합니다.
테두리에서 색깔 추가하기 | 현재 사용 중인 테두리 단추 색깔을 라이브러리에 추가합니다.
삭제하기 | 선택한 색깔을 라이브러리에서 삭제합니다.
새 라이브러리 | 새로운 색깔 라이브러리를 만듭니다. 새 라이브러리를 만들면 라이브러리가 비어 있으므로 추가하기를 선택하여 원하는 색깔을 추가해야 합니다.
라이브러리 열기 | 미리 저장해 놓은 색깔 라이브러리를 엽니다.
다른 라이브러리로 저장하기 | 현재 사용 중인 색깔 라이브러리를 다른 이름으로 저장합니다.
라이브러리 추가하기 | 현재 사용 중인 색깔 라이브러리에 다른 라이브러리를 추가합니다.
라이브러리 초기화하기 | 기본 라이브러리를 편집한 뒤 원래 상태로 돌아가도록 만듭니다. 사용자가 만들어서 저장한 라이브러리에는 적용되지 않습니다.
Macintosh | Macintosh용 기본 색깔 라이브러리를 엽니다.
Windows | Windows용 기본 색깔 라이브러리를 엽니다.
웹 세이프 색깔 | 운영체제와 관계 없이 웹 브라우저에서 동일하게 표현되는 색깔을 모아 놓은 웹 세이프 색깔 라이브러리를 엽니다.
회색 음영 | 회색 음영을 명도별 표시한 색깔 라이브러리를 엽니다.
  • 단추 설명

    채우기에 적용
    지정한 색깔을 편집 창에서 선택한 개체의 채우기에 적용합니다.

    테두리에 적용
    지정한 색깔을 편집 창에서 선택한 개체의 테두리에 적용합니다.

    칠 속성 없애기
    개체의 채우기와 테두리 칠 속성을 없앱니다.


그라디언트

그라디언트

그라디언트 탭의 기능

그라디언트

그라디언트란 두 개 이상의 색깔과 투명도를 이용하여 점차적으로 변하도록 하는 칠하기 형태의 하나입니다. 그라디언트 라이브러리를 이용하면 원하는 형태의 그라디언트를 선택하여 개체에 적용할 수 있습니다. 또한 사용자가 직접 편집한 그라디언트를 라이브러리에 추가할 수도 있습니다.

예) 그라디언트를 이용한 개체 칠하기

그라디언트 탭의 기능

그라디언트 탭은 라이브러리에 등록된 그라디언트를 미리보기 형태로 표시합니다. 미리보기를 마우스로 누른 채 끌어서 순서를 바꿀 수 있습니다. 미리보기를 더블 클릭하면 그라디언트 편집 대화 상자에서 그라디언트 형태를 편집할 수 있습니다.

  • 하위 메뉴
    편집하기 | 선택한 그라디언트를 그라디언트 편집 대화 상자에서 편집합니다.
추가하기 | 편집한 그라디언트를 라이브러리에 추가합니다.
채우기에서 그라디언트 추가하기 | 현재 사용 중인 채우기 단추 그라디언트를 라이브러리에 추가합니다.
테두리에서 그라디언트 추가하기 | 현재 사용 중인 테두리 단추 그라디언트를 라이브러리에 추가합니다.
삭제하기 | 선택한 그라디언트를 라이브러리에서 삭제합니다.
새 라이브러리 | 새로운 그라디언트 라이브러리를 만듭니다. 새 라이브러리를 만들면 라이브러리가 비어 있으므로 추가하기를 선택하여 원하는 그라디언트를 추가해야 합니다.
라이브러리 열기 | 미리 저장해 둔 그라디언트 라이브러리를 엽니다.
다른 라이브러리로 저장하기 | 현재 사용 중인 라이브러리를 다른 이름으로 저장합니다.
라이브러리 추가하기 | 현재 사용 중인 라이브러리에 다른 라이브러리를 추가합니다.
라이브러리 초기화하기 | 기본 라이브러리를 편집했을 경우, 원래 상태로 복구합니다. 사용자가 만들어서 저장한 라이브러리에는 적용되지 않습니다.
기본 라이브러리 | 기본값으로 지정된 그라디언트 라이브러리를 엽니다.
  • 단추 설명

    채우기에 적용
    지정한 그라디언트를 편집 창에서 선택한 개체의 채우기에 적용합니다.

    테두리에 적용
    지정한 그라디언트를 편집 창에서 선택한 개체의 테두리에 적용합니다.

    칠 속성 없애기
    개체의 채우기와 테두리 칠 속성을 없앱니다.


패턴

패턴

패턴 탭의 기능

패턴

패턴이란 개체에 적용할 수 있는 칠 속성의 하나로 비트맵 이미지로 구성된 것을 말합니다. 패턴을 이용하면 마치 개체에 무늬를 입히듯이 개체를 꾸밀 수 있습니다.

예) 패턴을 이용한 개체 칠하기

패턴 탭의 기능

패턴 탭에서는 라이브러리에 등록된 패턴이 미리보기 형태로 표시됩니다. 새로운 패턴을 추가하거나 불필요한 패턴을 삭제할 수 있으며, 미리보기를 마우스로 누른 채 끌어서 순서를 바꿀 수도 있습니다.

  • 하위 메뉴
    추가하기 | 새로운 패턴을 추가합니다. 열기 대화 상자에서 원하는 이미지 파일을 선택하여 라이브러리에 추가합니다.
채우기에서 패턴 추가하기 | 현재 사용 중인 채우기 단추의 패턴을 라이브러리에 추가합니다.
테두리에서 패턴 추가하기 | 현재 사용 중인 테두리 단추의 패턴을 라이브러리에 추가합니다.
삭제하기 | 선택한 패턴을 라이브러리에서 삭제합니다.
새 라이브러리 | 새로운 패턴 라이브러리를 만듭니다. 새 라이브러리를 만들면 라이브러리가 비어 있으므로 추가하기를 선택하여 원하는 패턴을 추가해야 합니다.
라이브러리 열기 | 미리 저장해 둔 패턴 라이브러리를 엽니다.
다른 라이브러리로 저장하기 | 현재 사용 중인 패턴 라이브러리를 다른 이름으로 저장합니다.
라이브러리 추가하기 | 현재 사용 중인 라이브러리에 다른 패턴 라이브러리를 추가합니다.
라이브러리 초기화하기 | 기본 라이브러리를 편집했을 경우, 원래 상태로 복구합니다. 사용자가 만들어서 저장한 라이브러리에는 적용되지 않습니다.
기본 라이브러리 | 기본값으로 지정된 패턴 라이브러리를 엽니다.
회색 패턴 라이브러리 | 모양이 반복되는 다양한 회색 패턴 라이브러리를 엽니다.
  • 단추 설명

    채우기에 적용
    지정한 패턴을 편집 창에서 선택한 개체의 채우기에 적용합니다.

    테두리에 적용
    지정한 패턴를 편집 창에서 선택한 개체의 테두리에 적용합니다.

    칠 속성 없애기
    개체의 채우기와 테두리 칠 속성을 없앱니다.


레이어 창 소개

레이어 창을 이용하면 편집 중인 이미지를 구성하는 레이어와 개체, 시트에 대한 정보를 확인하고 속성을 변경할 수 있습니다. 메뉴에서 [창 > 레이어]를 선택하면 레이어 창이 열리며, 창 설정을 변경하여 필요에 따라 창을 고정시키거나 띄어 놓고 사용할 수 있습니다. 레이어 창은 레이어, 시트 탭으로 구성되어 있습니다.

  • 레이어 탭
    레이어와 레이어를 구성하는 개체들의 목록을 보여줍니다. 개체의 이름, 순서를 바꾸거나 레이어 속성을 편집할 수 있습니다. 단추를 누르면 하위 메뉴가 나타납니다.
  • 시트 탭
    이미지에 사용된 시트 목록을 보여줍니다. 시트 이름을 바꾸거나 추가/복사/편집 등의 작업을 할 수 있습니다. 단추를 누르면 하위 메뉴가 나타납니다.


레이어

레이어

레이어 탭의 기능

레이어

개체들은 종이와 같은 가상의 공간 위에 겹쳐지듯이 만들어집니다. 이러한 공간을 레이어라고 합니다. 하나의 레이어 안에는 여러 개의 개체가 존재할 수 있습니다. 그림 파일을 구성하는 최소 단위가 개체라면 이 개체들이 모여 그룹을 이루고, 레이어는 그 그룹을 포괄합니다.

레이어 탭의 기능

레이어 탭을 이용하면 개체와 레이어 정보를 한눈에 확인하고 효과적으로 편집 및 관리할 수 있습니다. 레이어 탭의 목록에는 개체와 레이어가 겹치기 순서에 따라 표시되며, 혼합 모드, 불투명도와 같은 레이어 속성을 지정할 수 있습니다. 또한 레이어 감추기, 잠그기 기능을 이용하여 편집 작업을 효율적으로 할 수 있습니다.

  • 하위 메뉴
    추가하기 | 새로운 레이어를 추가합니다. 새로 추가된 레이어는 레이어 목록의 가장 위에 나타납니다.
삭제하기 | 목록에서 선택한 레이어를 삭제합니다. 레이어에 개체가 포함된 경우 함께 삭제됩니다.
복사하기 | 선택한 레이어를 복사합니다. 레이어에 개체가 포함된 경우 개체도 함께 복사됩니다.
개체 복사하기 | 선택한 개체를 복사합니다.
이름 바꾸기 | 선택한 레이어의 이름을 바꿉니다.
개체 이름 바꾸기 | 선택한 개체의 이름을 바꿉니다.
모두 보이기 | 레이어를 모두 보이게 합니다.
모두 감추기 | 레이어를 모두 보이지 않게 합니다.
모두 잠그기 | 레이어를 편집할 수 없도록 모두 잠급니다. 잠금 상태의 개체는 편집 창에는 표시되지만 선택하거나 편집할 수 없습니다.
잠금 풀기 | 레이어 잠금 기능을 해제합니다.
미리보기 설정 | 레이어 목록 창에 나타나는 개체 미리보기의 크기 및 보이기 여부를 미리보기 설정 대화 상자에서 지정합니다.
  • 혼합 모드
    기본 | 개체에 아무 효과도 적용시키지 않습니다.
곱하기 | 현재 선택한 개체와 그 아래 개체의 색상 값을 합해서 보여줍니다. 흰색과 합성되면 아무 변화가 없으나 검정색과 합성되면 검정색이 됩니다.
스크린 | 현재 선택한 개체와 그 아래 개체를 합하였을 때 밝은 값을 보여줍니다. 곱하기와는 반대로 검정색과 합성되면 아무 변화가 없으나 흰색과 합성되면 흰색이 됩니다.
어둡게 | 합성되는 두 개체에서 어두운 값을 보여줍니다. 흰색은 변화가 없습니다.
밝게 | 합성되는 두 개에서 밝은 값을 보여줍니다. 검정색은 변화가 없습니다.
    예) 오른쪽 아래 원을 기준으로 표시한 혼합 모드
기본 | 곱하기 | 스크린
어둡게 | 밝게 |
  • 불투명도

    • 개체, 레이어의 불투명도를 지정합니다. 값이 낮아질수록 더 투명해집니다. 불투명도를 0%으로 지정하면 개체가 완전히 투명해져서 보이지 않습니다. 불투명도가 50%인 개체는 반투명하여 밑에 있는 개체가 비쳐 보입니다.

    예) 오른쪽 아래 원을 기준으로 표시한 불투명도
불투명도 100% | 불투명도 50% | 불투명도 0%
  • 레이어 목록
    개체와 레이어 이름을 목록으로 보여줍니다. 항목을 더블 클릭하면 이름 바꾸기 대화 상자에서 개체와 레이어 이름을 변경할 수 있습니다.
    / | 레이어를 펼치거나 접습니다. 레이어에 포함된 개체를 편집하려면 레이어를 펼쳐야 합니다. 로 표시되면 접힌 상태입니다.
 | 레이어나 개체를 보이게 또는 보이지 않게 합니다. 레이어 목록에서 눈 모양 [image] 으로 표시된 단추를 눌러 눈 모양을 없애면 해당 개체가 편집 창에 표시되지 않습니다. 레이어를 펼친 상태에서 레이어의 눈 모양 [image] 단추를 눌러 레이어를 보이지 않게 하면, 해당 레이어에 포함된 모든 개체의 눈 모양 단추가 비활성화되고 개체들이 편집 창에 보이지 않습니다.
 | 특정 레이어나 개체를 잠금 상태로 설정합니다. 잠금 상태의 개체는 편집 창에는 표시되지만 선택하거나 편집할 수 없습니다. 레이어 목록에서 두 번째 사각형을 클릭하여 자물쇠 모양 [image] 이 나타나게 하면 해당 개체가 잠금 상태로 설정됩니다. 레이어를 잠금 상태로 설정하면 레이어에 포함된 모든 개체도 잠깁니다.
  • 단추 설명
    레이어 추가 | 레이어 추가하기 새로운 레이어를 추가합니다. 하위 메뉴의 추가하기와 동일한 기능입니다.
 | 레이어 복사하기 기존 레이어를 추가합니다. 하위 메뉴의 복사하기와 동일한 기능입니다.
개체 삭제 | 개체 삭제하기 선택한 개체 또는 레이어를 삭제합니다.


시트

시트

시트 탭의 기능

시트

레이어가 여러 개체를 하나로 묶는 역할을 한다면 시트는 레이어와 개체를 하나로 묶는 역할을 합니다. 즉, 레이어의 상위 개념이자 파일의 하위 개념에 해당합니다. 한 장면을 구성하고 있는 여러 레이어들을 함께 관리하는 개념으로 주로 롤오버 버튼에서 Normal/Rollover/Highlight의 각각 다른 버튼 모양을 별도로 만들 때 사용합니다. 하나의 파일에는 여러 개의 시트가 존재할 수 있으며, 시트를 전환하면 편집 창에 나타나는 그림도 해당 시트의 내용으로 바뀝니다.

시트 탭의 기능

시트 탭에서는 파일에 포함되어 있는 모든 시트 목록을 확인하고 시트를 추가/복사/삭제할 수 있습니다.

  • 하위 메뉴
    추가하기 | 목록의 제일 아래쪽에 새로운 시트를 추가합니다. 하나의 파일 내에 여러 개의 시트를 만들 수 있습니다.
삭제하기 | 목록에서 선택한 시트를 삭제합니다. 시트 안에 포함된 레이어와 개체가 함께 삭제됩니다.
복사하기 | 선택한 시트를 복사합니다. 롤오버 버튼을 만들기 위해 기존 버튼을 복사하여 수정할 때 사용합니다.
이름 바꾸기 | 시트의 이름을 알아보기 쉽도록 바꿉니다. 롤오버 버튼을 만들 경우 반드시 시트의 이름을 Normal/Rollover/Highlight로 지정해야 합니다.
  • 시트 목록

    • 시트의 이름을 목록으로 보여줍니다. 항목을 더블 클릭하면 이름 바꾸기 대화 상자에서 시트 이름을 변경할 수 있습니다.

  • 단추 설명
    시트 추가 | 시트 추가하기 새로운 시트를 추가합니다. 하위 메뉴의 추가하기와 동일한 기능입니다.
시트 복사 | 시트 복사하기 선택한 시트를 복사합니다. 하위 메뉴의 복사하기와 동일한 기능입니다.
시트 삭제 | 시트 삭제하기 선택한 시트를 삭제합니다. 하위 메뉴의 삭제하기와 동일한 기능입니다.


미리보기 설정 대화 상자

[레이어 창 레이어 탭 > 하위 메뉴 미리보기 설정]

레이어 창의 레이어 탭에서는 개체의 미리보기가 각 개체 이름 왼쪽에 표시됩니다. 미리보기 설정 대화 상자에서는 미리보기의 크기 및 표시 여부를 설정할 수 있습니다.

  • 미리보기 없음
    개체의 미리보기를 표시하지 않습니다.
  • 작게
    개체의 미리보기를 작게 표시합니다.
  • 보통
    개체의 미리보기를 보통으로 표시합니다.
  • 크게
    개체의 미리보기를 크게 표시합니다.


라이브러리 창 소개

라이브러리란 개체를 만들고 편집하는 데 필요한 요소들을 미리 만들어 놓은 창고를 말합니다. 라이브러리는 작업을 빠르고 효율적으로 하기 위한 것으로서 메뉴에서 [창 > 라이브러리]을 선택하면 나타납니다. 스타일은 여러 가지 속성을 개체에 한꺼번에 적용시킬 수 있도록 몇 가지 속성을 묶어 놓은 것을 말하며, 모양은 벡터형 개체로서 기본 도형 도구로 바로 삽입해서는 만들기 어려운 형태를 미리 만들어 놓은 것을 말합니다.

  • 스타일 탭
    스타일 라이브러리에서 제공하는 스타일을 개체에 적용하거나, 사용자가 편집한 형태를 스타일로 등록할 수 있습니다. 단추를 누르면 스타일 라이브러리를 관리하기 위한 하위 메뉴가 나타납니다.
  • 모양 탭
    미리 만들어진 여러 가지 형태의 벡터 개체를 마우스로 누른 채 끌어서 손쉽게 편집 창에 삽입할 수 있습니다. 단추를 누르면 모양 라이브러리를 관리하기 위한 하위 메뉴가 나타납니다.


스타일

스타일

스타일 탭의 기능

스타일

스타일이란 칠 속성, 테두리 속성, 글자 속성, 효과 등 개체의 다양한 속성을 한꺼번에 적용할 수 있도록 규격화시켜 놓은 것을 말합니다. 스타일 라이브러리에서 원하는 스타일을 선택하여 개체에 적용하면 스타일에 포함된 여러 속성이 한꺼번에 적용됩니다.

예) 스타일을 적용한 개체

스타일 탭의 기능

스타일 탭에는 라이브러리에 등록되어 있는 스타일 종류가 미리보기 형태로 나타납니다. 글자가 포함된 개체의 속성을 스타일로 등록했을 때는 'Text'로 표시됩니다. 미리보기를 선택한 뒤 마우스로 끌어서 순서를 바꿀 수 있습니다. 미리보기를 더블 클릭하면 스타일 편집 대화 상자에서 사용자가 원하는 형태로 스타일을 편집할 수 있습니다.

  • 하위 메뉴
    편집하기 | 스타일을 편집합니다. 스타일 편집 대화 상자에서 원하는 속성을 선택합니다.
추가하기 | 편집한 개체의 속성을 스타일로 추가합니다.
삭제하기 | 선택한 스타일을 라이브러리에서 삭제합니다.
새 라이브러리 | 새 스타일 라이브러리를 만듭니다. 새 라이브러리를 만들면 스타일이 포함되어 있지 않으므로 추가하기를 선택하여 원하는 스타일을 추가해야 합니다.
라이브러리 열기 | 미리 저장해 둔 스타일 라이브러리를 엽니다.
다른 라이브러리로 저장하기 | 현재 사용 중인 스타일 라이브러리를 다른 이름으로 저장합니다.
기본 라이브러리 | 기본값으로 지정되어 있는 스타일 라이브러리를 엽니다.
  • 단추 설명
    스타일 추가 | 스타일 추가하기 편집한 개체의 속성을 스타일로 추가합니다. 하위 메뉴의 추가하기와 동일한 기능입니다.
스타일 삭제 | 스타일 삭제하기 선택한 스타일을 삭제합니다. 하위 메뉴의 삭제하기와 동일한 기능입니다.


모양

모양

모양 탭의 기능

모양

모양이란 여러 가지 상징적인 형태의 개체를 미리 만들어 놓은 것을 말합니다. 기본 도형 도구로는 만들기 힘든 복잡한 형태의 도형을 모양 라이브러리에서 선택하여 삽입할 수 있습니다. 웹캔버스에서 제공하는 모양 라이브러리는 벡터 개체이기 때문에 비트맵 이미지와 달리 크기를 변경해도 이미지가 깨지지 않습니다.

예) 모양을 이용하여 삽입한 개체

모양 탭의 기능

모양 탭에서는 라이브러리에 등록된 모양이 미리보기 형태로 표시됩니다. 미리보기를 선택한 뒤 마우스로 끌어서 순서를 바꿀 수 있습니다. 원하는 모양을 선택하여 편집 창으로 끌면 모양이 삽입됩니다. 사용자가 직접 그린 개체를 모양으로 추가할 수도 있습니다.

  • 하위 메뉴
    추가하기 | 편집 창에서 선택한 개체를 모양 라이브러리에 추가합니다. 라이브러리 목록의 제일 뒤에 추가됩니다.
삭제하기 | 선택한 모양을 라이브러리에서 삭제합니다.
새 라이브러리 | 새로운 모양 라이브러리를 만듭니다. 새 라이브러리를 만들면 라이브러리가 비어 있으므로, 추가하기를 선택하여 원하는 모양을 추가해야 합니다.
라이브러리 열기 | 미리 저장해 놓은 다른 모양 라이브러리를 엽니다.
다른 라이브러리로 저장하기 | 현재 사용 중인 모양 라이브러리를 다른 이름으로 저장합니다.
그림 문자 라이브러리 | 그림 문자 모양 라이브러리를 엽니다.
기본 라이브러리 | 기본값으로 지정된 모양 라이브러리를 엽니다.
기호 라이브러리 | 기호 모양 라이브러리를 엽니다.
도표 라이브러리 | 도표 모양 라이브러리를 엽니다.
웹 사이트 라이브러리 | 웹 사이트에 흔히 쓰이는 모양 라이브러리를 엽니다.
  • 단추 설명
    모양 추가 | 모양 추가하기 현재 편집 창에서 선택한 도형을 모양 라이브러리에 추가합니다. 하위 메뉴의 추가하기와 동일한 기능입니다.
모양 삭제 | 모양 삭제하기 선택한 모양을 라이브러리에서 삭제합니다. 하위 메뉴의 삭제하기와 동일한 기능입니다.

비트맵 이미지를 모양에 추가하고, 해당 라이브러리를 다시 불러올 때, 시스템의 성능에 따라 약간의 시간이 소요될 수 있습니다.


도구 막대 설정

도구 막대를 보이게 또는 보이지 않게 하거나, 도구 막대의 위치를 변경하여 자신에게 맞는 편집 환경으로 재구성할 수 있습니다.

도구 막대 보이기/감추기

웹캔버스는 그래픽 작업을 빠르고 편리하게 할 수 있도록 기본 도구 막대와 레이아웃 도구 막대를 제공합니다. 도구 막대를 보이지 않게 하려면 메뉴에서 [보기 > 도구 막대]를 선택한 뒤 보이지 않게 하려는 항목을 선택 해제합니다.

도구 막대 이동

도구 막대를 이동하려면 도구 막대 왼쪽 경계선을 마우스로 누른 채 끌어서 원하는 위치로 이동합니다.

도구 막대 붙이기/분리하기

도구 막대를 편집 창에서 분리하려면 도구 막대 왼쪽 경계선을 더블 클릭합니다. 분리된 도구 막대를 다시 편집 창에 붙이려면 분리된 도구 막대의 제목 막대를 더블 클릭하거나 제목 막대를 마우스로 누른 채 끌어서 원하는 위치에 고정시킵니다. 도구 막대를 고정시킬 수 있는 위치에서는 도구 막대에 검정색 테두리가 길게 표시됩니다.


창 설정

여러 개의 작업 창을 고정시키거나 분리하거나 또는 위치를 변경하여 자신에게 맞는 편집 환경으로 재구성할 수 있습니다.

작업 창 도킹 허용/분리하기

웹캔버스는 여러 개의 창으로 이루어진 작업 환경을 제공합니다. 필요에 따라 작업 창(속성, 레이어, 라이브러리, 견본 창)을 편집 창에 고정시키거나 띄워 놓고 사용할 수 있습니다. 메뉴에서 [창 > 도킹 허용]을 선택한 다음, 작업 창을 마우스로 누른 채 끌어서 편집 창 양옆으로 가져 가면 창이 고정됩니다. 창을 띄어 놓고 사용하려면 메뉴에서 [창 > 도킹 허용] 선택을 해제합니다. 편집 창에 고정된 작업 창 위쪽의 가로줄 부분을 더블 클릭하면 작업 창들이 다시 분리되며, 분리된 작업 창의 제목 막대를 더블 클릭하면 원래 위치로 고정됩니다.

도킹 허용을 선택한 상태에서도 <Ctrl>키를 누르면 창이 고정되는 것을 막을 수 있습니다.

작업 창 보이기/숨기기

작업 창을 보이게 또는 보이지 않게 설정할 수 있습니다. [창] 하위 메뉴에서 원하는 작업 창을 선택하면 해당 작업 창이 나타납니다. 작업 창을 숨기려면 선택을 해제합니다. 작업 창이 분리되어 있을 때는 제목 막대의 바로가기 메뉴에서 [숨기기]을 선택하면 작업 창이 감춰집니다.

여러 개의 문서로 작업하기

여러 개의 문서를 열고 작업할 경우, 창 메뉴 하위에 나타나는 문서 목록을 이용하여 원하는 문서로 바로 이동할 수 있습니다. 편집 창에 10개 이상의 문서가 열렸을 때는 문서 목록 아래에 추가 창/기타 창 메뉴가 표시됩니다. 창 선택 대화 상자에서 원하는 문서를 선택하여 이동할 수 있습니다.

메뉴에서 [창 > 계단식/가로로/세로로 배열]을 선택하면 흩어져 있는 문서를 정렬할 수 있습니다. [창 > 최소창 정렬]을 선택하면 흩어져 있는 문서 아이콘을 정렬할 수 있습니다.


눈금자 설정

눈금자는 개체의 위치와 크기 정보를 한눈에 알 수 있도록 편집 창의 왼쪽과 위쪽에 표시하는 눈금 표시를 말합니다. 눈금자를 이용하면 개체 편집 작업을 보다 세밀하고 정확하게 할 수 있습니다.

모두 보이기

메뉴에서 [보기 > 눈금자 > 모두 보이기]를 선택하면 수평, 수직 눈금자가 나타납니다. 눈금자를 감추려면 선택을 해제합니다.

수평/수직 눈금자 보이기

메뉴에서 [보기 > 눈금자 > 수평 눈금자 보이기]를 선택하면 수평 눈금자가 편집 창 위쪽에 나타납니다. 눈금자를 감추려면 선택을 해제합니다.

메뉴에서 [보기 > 눈금자 > 수직 눈금자 보이기]를 선택하면 수직 눈금자가 편집 창 왼쪽에 나타납니다. 눈금자를 감추려면 선택을 해제합니다.

가이드를 이용하려면 먼저 눈금자가 표시되도록 해야 합니다.


그리드 설정

그리드는 개체의 위치나 크기를 정확하게 편집할 수 있도록 편집 창에 표시하는 격자 무늬의 보조선을 말합니다. 그리드는 편집을 도와주는 기능으로 실제 이미지에는 나타나지 않습니다.

보이기

메뉴에서 [보기 > 그리드 > 보이기]를 선택하면 그리드가 편집 창에 표시됩니다. 그리드를 보이지 않게 하려면 선택을 해제합니다.

끌어당김

끌어당김 기능을 이용하면 개체를 그리드 근처로 가져갔을 때 그리드가 개체를 끌어당겨서 개체의 위치나 크기를 정확하게 편집할 수 있습니다. 메뉴에서 [보기 > 그리드 > 끌어당김]을 선택하면 끌어당김 기능이 켜집니다.

설정

메뉴에서 [보기 > 그리드 > 설정]을 선택하면 그리드/가이드 대화 상자에서 그리드의 색깔, 모양, 간격을 변경할 수 있습니다.


가이드 설정

가이드는 개체를 정확하게 편집하기 위해 사용자가 원하는 위치에 표시하는 보조선입니다. 가이드는 눈금자 기능을 이용할 때에만 쓸 수 있습니다.

보이기

메뉴에서 [보기 > 가이드 > 보이기]를 선택하면 설정된 가이드를 보이게 하거나 감출 수 있습니다.

끌어당김

메뉴에서 [보기 > 가이드 > 끌어당김]을 선택하여 끌어당김 기능을 켜면 개체의 위치나 크기를 정확하게 조절할 수 있습니다. 편집 창에 있는 개체를 마우스로 누른 채 끌어서 가이드 근처로 가져가면 가이드가 개체를 끌어당깁니다.

설정

메뉴에서 [보기 > 가이드 > 설정]을 선택하면 그리드/가이드 대화 상자에서 가이드의 색깔과 모양을 변경할 수 있습니다.

가이드 만들기

가이드를 만들려면 수평/수직 눈금자가 보이도록 설정해야 합니다. 가로 가이드를 만들려면 수평 눈금자를, 세로 가이드를 만들려면 수직 눈금자를 보이도록 설정합니다.

  1. 눈금자 위에서 마우스를 누른 채 편집 창 내부로 끌어 옵니다.
  2. 원하는 위치까지 끌어오면 가이드의 위치가 숫자로 표시됩니다. 마우스 단추를 놓으면 가이드가 만들어집니다.
  3. 가이드를 이동시키려면 가이드 위에서 마우스 포인터의 모양이 화살표 모양으로 바뀌었을 때 가이드를 누른 채 원하는 위치로 옮깁니다.

<Ctrl>키를 누른 상태로 가이드의 위치를 이동시키면 새 가이드가 추가됩니다.

가이드 지우기

메뉴에서 [보기 > 가이드 > 모두 지우기]를 선택하면 편집 창의 모든 가이드가 지워집니다. 특정 가이드만을 지우려면 가이드를 선택한 채 편집 창 바깥으로 끌어 당깁니다.

가이드 잠금

메뉴에서 [보기 > 가이드 > 잠그기]을 선택하면 이미 만들어진 가이드의 위치를 변경할 수 없도록 현재 위치에 고정시킵니다.


상황선 설정

상황선에는 현재 편집 창의 상태와 관련된 정보가 표시됩니다.

상황선 보이기/감추기

메뉴에서 [보기 > 도구 막대 > 상황선]을 선택하면 상황선이 표시됩니다. 상황선이 나타나지 않게 하려면 선택을 해제합니다.

상황선에 표시되는 정보

  • 편집 창에서 마우스의 위치를 좌표값으로 표시합니다.
  • 선택한 메뉴 또는 도구 단추에 대한 설명이 나타납니다. 예를 들어 메뉴에서 [파일 > 저장하기]에 마우스 포인터를 갖다 대면 "현재 문서를 저장합니다."라는 설명이 나타납니다.


프로그램 설정

프로그램 설정 대화 상자에서 이미지 편집 작업과 관련된 일반 설정과 SVG 미리보기 설정을 할 수 있습니다.

일반 설정

개체를 변형할 때 테두리 두께, 그라디언트, 패턴을 함께 변형시킬 것인지와 패스 방향 보이기 여부를 설정합니다.

  1. 메뉴에서 [파일 > 프로그램 설정]을 선택합니다.
  2. 프로그램 설정 대화 상자 일반 탭에서 원하는 옵션을 선택합니다. 기본값으로 테두리 두께 함께 조절, 그라디언트 변형, 패턴 변형, 패스 방향 표시가 모두 선택되어 있습니다.

SVG 미리보기 설정

브라우저에서 SVG 미리보기를 실행했을 때 적용할 글자 출력 방식, 인코딩 등의 옵션, SVG Viewer가 설치된 브라우저의 경로를 설정합니다.

  1. 메뉴에서 [파일 > 프로그램 설정]을 선택합니다.
  2. 프로그램 설정 대화 상자에서 SVG 미리보기 탭을 엽니다.
  3. 경로, 글자 출력 방식, 인코딩 소수 자릿수를 지정합니다.
  4. 확인 단추를 누릅니다.

브라우저로 SVG 파일을 미리 보려면, SVG Viewer 플러그인을 설치해야 합니다. SVG Viewer는 Adobe 웹 사이트에서 내려받으실 수 있습니다.


창 선택 대화 상자

[창 > 추가 창/기타 창]

현재 편집 창에 열린 문서 목록이 표시됩니다. 문서를 선택하고 확인 단추를 누르면 해당 문서로 이동합니다.

창 메뉴 아래에 추가 창/기타 창 하위 메뉴는 문서가 10개 이상 열렸을 때만 생기는 하위 메뉴입니다. 메뉴 이름은 운영체제(Operating System)에 따라 다를 수 있습니다. 추가 창/기타 창 메뉴를 선택하면 창 선택 대화 상자가 열립니다.


그리드/가이드 대화 상자

[보기 > 그리드/가이드 > 설정]

그리드

가이드

그리드

  • 색깔
    그리드의 색깔을 지정합니다. 문서 배경색이 어두울 때는 그리드를 밝은 색으로, 문서 배경색이 밝을 때는 그리드를 어두운 색으로 지정합니다.
  • 모양
    선과 점 중에서 그리드의 모양을 지정합니다. 기본값은 선입니다.
  • 간격
    그리드의 간격을 지정합니다. 기본값은 50 픽셀입니다.

그리드와 함께 끌어당김 기능을 이용하면 개체를 그리드 근처로 가져갔을 때 그리드가 개체를 끌어 당겨 편집 작업을 효과적으로 할 수 있습니다. 그리드 끌어당김 기능을 켜려면 메뉴에서 [보기 > 그리드 > 끌어당김]을 선택합니다.

가이드

  • 색깔
    가이드의 색깔을 지정합니다.
  • 모양
    선과 점 중에서 가이드의 모양을 지정합니다. 기본값은 선입니다.

가이드와 함께 끌어당김 기능을 이용하면 개체를 가이드 근처로 가져갔을 때 가이드가 개체를 끌어 당겨 편집 작업을 효과적으로 할 수 있습니다. 가이드 끌어당김 기능을 켜려면 메뉴에서 [보기 > 가이드 > 끌어당김]을 선택합니다.


프로그램 설정 대화 상자 - 일반 탭

[파일 > 프로그램 설정 - 일반 탭]

  • 테두리 두께 함께 조절
    선택 표시하면 개체를 변형할 때 테두리의 두께도 함께 조절해 줍니다.
  • 그라디언트 변형
    선택 표시하면 개체를 변형할 때 그라디언트도 함께 변형해 줍니다.
  • 패턴 변형
    선택 표시하면 개체를 변형할 때 패턴도 함께 변형해 줍니다.
  • 패스 방향 표시
    선택 표시하면 선택한 패스의 방향을 보이게 합니다.


프로그램 설정 대화 상자 - SVG 미리보기 탭

[파일 > 프로그램 설정 - SVG 미리보기 탭]

  • 경로
    SVG Viewer가 설치된 브라우저의 경로를 찾아보기 단추로 지정합니다.
  • 글자 출력 방식
    SVG 파일의 글자 출력 방식을 그대로 내보내기와 패스로 변환하기 중에서 선택합니다.
  • 인코딩
    SVG 파일의 인코딩 방식을 UTF-8 또는 로컬 인코딩 중에서 선택합니다. 로컬 인코딩을 선택하면 현재 Windows 시스템의 로컬 인코딩을 사용합니다.
  • 소수 자릿수
    SVG 파일에서 좌표를 표시하는 소수 자릿수를 지정합니다.
    예) 기본값 3으로 지정했을 경우, 100픽셀은 100.000와 같이 표시됩니다.

UTF-8은 한 문자를 위해 2바이트를 사용하되, 널리 사용되는 문자(ASCII의 0부터 127까지)는 1바이트만 사용하도록 한 유니코드의 버전입니다.


파일 메뉴

[파일] 메뉴는 파일을 새로 만들거나 열고, 저장하고, 인쇄하는 작업과 관련된 메뉴들로 구성되어 있습니다.

파일

편집

보기

수정

효과

창

도움말

새 문서 | 새 문서를 엽니다. 만들어진 문서의 이름은 순서에 따라 '문서1, 문서2, 문서3...'과 같이 자동으로 설정됩니다. 새 문서 만들기
열기 | 이미 만들어서 저장해 두었던 문서를 엽니다. 열기 기능으로 열 수 있는 문서는 웹캔버스의 고유 파일 형식인 *.tng 파일입니다. 다른 파일 형식을 불러오려면 가져오기를 이용합니다. 기존 문서 열기
닫기 | 현재 편집 중인 문서를 닫습니다.
모두 닫기 | 현재 열려 있는 모든 문서를 닫습니다.
저장하기 | 편집한 개체를 웹캔버스의 고유 파일 형식인 *.tng 파일로 저장합니다. 저장하기
다른 이름 으로 저장하기 | 편집한 문서를 다른 이름으로 저장합니다. 다른 이름으로 저장하기
복사본 저장하기 | 현재 문서의 복사본을 저장합니다. 현재 문서는 편집 중인 채로 남아 있게 됩니다. 복사본 저장하기
가져오기 | 일반 비트맵 파일(*.bmp,*.gif, *.jpg, *.jpeg, *.png) 혹은 일러스트레이터 파일(*.ai)을 웹캔버스로 가져옵니다. 불러온 파일에 다양한 효과를 적용할 수 있습니다. 비트맵 파일 가져오기 일러스트레이터 파일 가져오기 스마트 버튼 파일 가져오기
내보내기 | SVG 파일 웹캔버스에서 작업한 파일을 SVG 파일로 내보냅니다. SVG(Scalable Vector Graphics)는 그라디언트, 애니메이션 및 필터 효과와 같이 복잡한 구성 요소를 포함하는 고해상도 그래픽으로, 정밀한 디자인이 가능한 벡터 그래픽 표준입니다. SVG 파일로 내보내기 비트맵 파일 웹캔버스에서 작업한 파일을 비트맵 파일로 내보냅니다. 웹 문서에 많이 쓰이는 GIF, JPG, PNG 파일이 비트맵 파일에 해당됩니다. 비트맵 파일로 내보내기
인쇄하기 | 현재 문서를 인쇄합니다. 인쇄하기
인쇄 미리 보기 | 현재 문서를 인쇄했을 때의 형태를 미리 보여줍니다.
인쇄 설정 | 인쇄할 용지의 크기 및 종류, 인쇄 방향을 설정합니다. 인쇄 설정하기
문서 정보 | 문서 정보 대화상자에서 문서의 제목과 간단한 설명을 입력합니다. 이 정보는 개체를 SVG로 저장했을 경우 소스에 <title>, <desc> 요소로 나타납니다. 문서 정보 넣기
프로그램 설정 | 웹캔버스에 대한 옵션을 설정합니다. 프로그램 설정
최근 작업 문서 | 최근 작업했던 문서가 4개까지 나타납니다.
끝 | 편집 작업을 마치고 웹캔버스를 끝냅니다.


편집 메뉴

[편집] 메뉴는 자르기, 복사하기, 붙이기, 선택하기 등 기본 편집과 관련된 메뉴들로 구성되어 있습니다.

파일

편집

보기

수정

효과

창

도움말

돌이킴 | 문서를 가장 최근 작업 이전 상태로 되돌립니다. 반복해서 선택하면 최근에 편집한 작업이 차례로 취소됩니다.
되돌이킴 | 돌이킨 내용을 원래대로 복구합니다. 반복해서 선택하면 최근에 돌이킨 작업이 차례로 취소됩니다.
자르기 | 선택한 개체를 잘라내어 클립보드에 저장합니다. 개체 자르기
복사하기 | 선택한 개체를 복사하여 클립보드에 저장합니다. 개체 복사하기
붙이기 | 자르거나 복사한 개체를 문서에 붙여 넣습니다. 개체 붙이기
같은 자리에 붙이기 | 선택한 개체를 복사하여 같은 자리에 붙여 넣습니다.
지우기 | 선택한 개체를 삭제합니다. 개체 삭제하기
모두 선택하기 | 현재 문서 상의 모든 개체를 선택합니다.
선택 해제하기 | 개체 선택 상태를 취소합니다.
선택 반전하기 | 현재 문서 상에 선택된 개체 이외의 모든 개체를 선택합니다.


보기 메뉴

[보기] 메뉴는 도구 막대, 눈금자, 그리드/가이드 등 편집 창 설정과 관련된 메뉴들로 구성되어 있습니다.

파일

편집

보기

수정

효과

창

도움말

도구 막대 | 기본 도구 기본 도구 막대는 문서 열기, 저장, 복사, 인쇄 등 파일과 관련된 기본 작업을 수행하는 도구 단추를 모아놓은 것입니다. 기본 도구 막대 레이아웃 도구 여러 개의 개체의 크기와 위치를 변경하여 레이아웃을 정리하는 데 사용되는 도구 단추를 모아 놓은 것입니다. 레이아웃 도구 막대 상황선 상황선은 편집 창 하단에 현재 작업과 관련된 간단한 설명을 보여줍니다. 상황선 설정 도구 옵션 도구 옵션을 보이게 하거나 감춥니다. 도구 옵션은 작업 도구에 대한 세부 항목을 표시합니다. 도구 옵션
눈금자 | 모두 보이기 편집 창에 눈금자를 보이거나 보이지 않게 합니다. 눈금자를 이용하면 개체 편집 작업을 보다 세밀하고 정확하게 할 수 있습니다. 수평 눈금자 보이기 편집 창에 수평 눈금자를 보이거나 보이지 않게 합니다. 수직 눈금자 보이기 편집 창에 수직 눈금자를 보이거나 보이지 않게 합니다. 눈금자 설정
그리드 | 보이기 편집 창에 그리드를 보이거나 보이지 않게 합니다. 항목을 선택하면 그리드가 편집 창에 나타납니다. 그리드를 보이지 않게 하려면 선택을 해제합니다. 끌어당김 끌어당김은 문서에 삽입된 개체의 위치나 크기를 정확하게 조절할 때 사용합니다. 끌어당김을 선택하면, 그리드 근처에서 개체의 위치나 크기를 바꾸면 그리드가 개체를 끌어당깁니다. 설정 그리드의 색깔, 모양, 간격 등의 속성을 설정합니다. 그리드 설정
가이드 | 보이기 편집 창에 가이드를 보이거나 보이지 않게 합니다. 끌어당김 끌어당김은 문서에 삽입된 개체의 위치나 크기를 정확하게 조절할 때 사용합니다. 끌어당김을 선택하면, 가이드 근처에서 개체의 위치나 크기를 바꾸면 가이드가 개체를 끌어당깁니다. 설정 가이드의 색깔, 모양 등의 속성을 설정합니다. 모두 지우기 현재 편집 창에 있는 가이드를 모두 제거합니다. 잠그기 현재 편집 창에 있는 가이드를 이동하거나 삭제할 수 없게 만듭니다. 가이드를 편집하려면 선택을 해제해야 합니다. 가이드 설정
매끄럽게 보이기 | 문서 내의 각각의 개체와 글자에 앤티 앨리어싱(Anti Aliasing)을 적용하여 가장자리를 매끄럽게 보여줍니다.
확대 | 현재 문서의 내용을 확대해서 보여줍니다. 반복해서 적용할 수 있습니다.
축소 | 현재 문서의 내용을 축소해서 보여줍니다. 반복해서 적용할 수 있습니다.
원래 크기로 | 현재 문서의 내용을 원래 크기로 보여줍니다. 확대/축소하기
내보내기 영역 | 보이기 내보내기 영역을 점선으로 표시합니다. 내보내기 영역으로 지정한 부분만이 저장하기 또는 내보내기로 만들어진 파일에 포함됩니다. 설정 내보내기 영역 대화 상자에서 내보내기 영역의 크기와 위치를 지정합니다. 자동 설정 개체의 크기를 포함하는 최소 영역으로 내보내기 영역이 자동 설정됩니다. 내보내기 영역 지정하기 내보내기 영역 변경하기 내보내기 영역 지우기 작업 창에 설정된 개체의 내보내기 영역을 지웁니다.
브라우저에서 SVG 미리보기 | 현재 문서의 미리보기를 Adobe SVG Viewer를 이용하여 보여줍니다. SVG 파일을 웹 브라우저로 확인하려면, 웹 브라우저에 SVG 파일을 그려서 보여줄 수 있는 플러그인을 설치해야 합니다. SVG Viewer는 Adobe 웹사이트에서 내려 받으실 수 있습니다. 브라우저에서 SVG 미리보기


수정 메뉴

[수정] 메뉴는 개체를 변형시키거나 정렬, 배분하는 등 개체 편집과 관련된 메뉴들로 구성되어 있습니다.

파일

편집

보기

수정

효과

창

도움말

변형 | 변형 반복하기 마지막에 개체에 실행한 변형을 반복합니다. 이동 선택한 개체를 이동시킵니다. 복사본을 만들어 이동시킬 수 있습니다. 개체 이동하기 크기 조절 상하/좌우 비율을 지정하여 개체를 확대하거나 축소합니다. 복사본을 만들어 크기를 조절할 수 있습니다. 크기 바꾸기 회전/기울이기 특정한 각도로 개체를 회전시키거나 기울입니다. 기울이기의 X/Y 값이 동일할 경우, 해당 값만큼의 회전시켰을 때와 동일한 효과를 갖습니다. 회전시키기 기울이기 뒤집기 X축이나 Y축 또는 기준 축의 각도를 조절해서 개체를 뒤집습니다. 축의 각도를 조절하면 개체의 방향이나 각도를 다르게 하여 뒤집을 수 있습니다.
 | 90도 회전 선택한 개체를 시계방향으로 90도 회전시킵니다. 180도 회전 선택한 개체를 시계방향으로 180도 회전시킵니다. 270도 회전 선택한 개체를 시계방향으로 270도 회전시킵니다.
 | 좌우 뒤집기 선택한 개체를 좌우로 뒤집습니다. 좌우 뒤집기 상하 뒤집기 선택한 개체를 상하로 뒤집습니다. 상하 뒤집기
 | 패스 변형값 초기 화 변형에 의해 흐트러진 패스 개체의 변형값을 초기화합니다. 패스 변형값 초기화
순서 바꾸기 | 맨 앞으로 가져오기 선택한 개체를 맨 앞으로 가져옵니다. 이동한 개체는 레이어 목록의 제일 위로 이동합니다. 앞으로 가져오기 선택한 개체를 한 단계 앞으로 가져옵니다. 이동한 개체는 레이어 목록에서 한 단계 위로 이동합니다. 뒤로 보내기 선택한 개체를 한 단계 뒤로 보냅니다. 이동한 개체는 레이어 목록에서 한 단계 아래로 이동합니다. 맨 뒤로 보내기 선택한 개체를 맨 뒤로 보냅니다. 이동한 개체는 해당 레이어 목록에서 제일 아래로 이동합니다. 겹치기 순서 바꾸기
정렬 | 왼쪽 선택한 개체들을 마지막 선택한 개체의 왼쪽에 맞추어 정렬합니다. 가운데 선택한 개체들을 마지막 선택한 개체의 가운데에 맞추어 정렬합니다. 오른쪽 선택한 개체들을 마지막 선택한 개체의 오른쪽에 맞추어 정렬합니다.
 | 위쪽 선택한 개체들을 마지막 선택한 개체의 위쪽에 맞추어 정렬합니다. 중간 선택한 개체들을 마지막 선택한 개체의 중간에 맞추어 정렬합니다. 아래쪽 선택한 개체들을 마지막 선택한 개체의 아래쪽에 맞추어 정렬합니다. 정렬하기
배분 | 왼쪽 양쪽 끝 개체의 왼쪽을 기준으로 나머지 개체들의 간격을 배분합니다. 가운데 양쪽 끝 개체의 가운데를 기준으로 나머지 개체들의 간격을 배분합니다. 오른쪽 양쪽 끝 개체의 오른쪽을 기준으로 나머지 개체들의 간격을 배분합니다.
 | 위쪽 양쪽 끝 개체의 위쪽을 기준으로 나머지 개체들의 간격을 배분합니다. 중간 양쪽 끝 개체의 중간을 기준으로 나머지 개체들의 간격을 배분합니다. 아래쪽 양쪽 끝 개체의 아래쪽을 기준으로 나머지 개체들의 간격을 배분합니다.
 | 수평 간격 맞추기 양쪽 끝 개체를 기준으로 개체간의 수평 간격을 맞춥니다. 수직 간격 맞추기 양쪽 끝 개체를 기준으로 개체간의 수직 간격을 맞춥니다. 간격 맞추기
같은 크기로 | 너비 맞추기 선택한 개체들의 너비를 같게 합니다. 마지막으로 선택한 개체를 기준으로 너비가 맞춰집니다. 높이 맞추기 선택한 개체들의 높이를 같게 합니다. 마지막으로 선택한 개체를 기준으로 너비가 맞춰집니다. 너비/높이 맞추기 선택한 개체들의 너비와 높이 모두를 같게 합니다. 마지막으로 선택한 개체를 기준으로 크기가 맞춰집니다. 크기 맞추기
그룹 만들기 | 선택한 여러 개의 개체를 그룹으로 묶습니다. 그룹화된 개체들은 하나의 개체처럼 행동합니다. 하나 이상의 개체 또는 그룹을 선택한 경우에만 활성화됩니다. 그룹 만들기
그룹 풀기 | 묶은 그룹을 풀어 원래의 개체들로 분리합니다. 그룹을 풀면 각각의 개체는 개별적으로 행동합니다. 그룹을 선택했을 경우에만 활성화됩니다. 그룹 풀기
패스로 변환하기 | 글자와 도형과 같은 개체를 패스로 변환하기합니다. 개체를 패스로 변환하기하면 다양한 편집이 가능합니다. 글자를 패스로 변환하기 도형을 패스로 변환하기
패스 | 방향 바꾸기 패스나 글자 패스의 순서와 방향을 바꿉니다. 패스 방향 바꾸기 연결하기 패스를 연결합니다. 닫기 패스를 닫습니다.
마스크 | 만들기 선택한 개체의 교집합 부분을 마스크로 만듭니다. 마스크 만들기 풀기 선택한 마스크를 원래의 개체들로 분리합니다. 마스크 풀기
컴파운드 패스 | 만들기 선택된 개체를 하나의 컴파운드 패스로 만듭니다. 선택된 개체들의 교집합 부분을 투명하게 됩니다. 컴파운드 패스 만들기 풀기 선택된 컴파운드 패스를 원래의 개체들로 분리합니다. 컴파운드 패스 풀기
하이퍼링크 | 만들기 선택한 개체에 하이퍼링크를 적용합니다. 하이퍼링크는 SVG 파일로 내보냈을 때만 작동합니다. 하이퍼링크 만들기 지우기 적용된 하이퍼링크를 삭제합니다. 하이퍼링크 지우기
문서 속성 | 문서 속성 대화 상자에서 문서의 너비, 높이, 배경색을 지정합니다. 문서 속성 바꾸기


효과 메뉴

[효과] 메뉴는 개체에 적용할 수 있는 효과와 관련된 메뉴들로 구성되어 있습니다.

파일

편집

보기

수정

효과

창

도움말

가우시안 블러 효과 | 선택한 개체에 가우시안 블러 효과를 적용하여 부드럽게 표현합니다. 가우시안 블러 효과 주기
그림자 효과 | 선택한 개체에 그림자 효과를 적용하여 입체적으로 보이게 합니다. 그림자 효과 주기
베벨 효과 | 개체에 베벨 효과를 적용하여 튀어 나와 보이게 합니다. 베벨 효과 주기
확산 효과 | 선택한 개체에 확산 효과를 적용합니다. 안쪽 확산 효과와 바깥쪽 확산 효과 중에서 선택할 수 있습니다. 확산 효과 주기
밝기/대비 | 선택한 개체의 밝기(Brightness)와 대비(Contrast)를 조절합니다. 밝기/대비 바꾸기
색상/채도 | 선택한 개체의 색상(Hue)과 채도(Saturation)를 조절합니다. 색상/채도 바꾸기

[효과] 메뉴의 모든 기능은 속성 창의 효과 탭을 이용하여 동일하게 개체에 적용시킬 수 있습니다.


창 메뉴

[창] 메뉴는 웹캔버스의 작업 창 설정과 관련된 메뉴들로 구성되어 있습니다.

파일

편집

보기

수정

효과

창

도움말

작업 도구 | 작업 도구를 보이게 하거나 감춥니다. 작업 도구는 이미지를 편집하는 데 자주 사용되는 기능들을 도구 단추 형태로 모아놓은 것입니다. 작업 도구
속성 | 칠하기, 테두리, 변형, 효과, 글자 속성을 설정할 수 있는 속성 창을 보이게 하거나 감춥니다. 속성 창 소개
견본 | 색깔, 그라디언트, 패턴을 설정할 수 있는 견본 창을 보이게 하거나 감춥니다. 견본 창 소개
레이어 | 레이어와 시트 정보를 보여주는 레이어 창을 보이게 하거나 감춥니다. 레이어 창 소개
라이브러리 | 스타일과 모양을 보여주는 라이브러리 창을 보이게 하거나 감춥니다. 라이브러리 창 소개
도킹 허용 | 속성 창, 견본 창, 레이어 창, 라이브러리 창을 고정시킬 수 있게 할 것인지 지정합니다. 전체 창의 좌/우측에 각 작업 창을 고정시킬 수 있습니다. 창 설정
계단식 배열 | 현재 열려있는 문서들을 계단식으로 배열합니다.
가로로 배열 | 현재 열려있는 문서들을 가로로 배열합니다.
세로로 배열 | 현재 열려있는 문서들을 세로로 배열합니다.
최소창 정렬 | 최소화된 문서 아이콘을 편집 창 아래쪽에 일렬로 정렬합니다.
기타 창 | 열린 문서의 목록을 보여줍니다. 10개 이상의 문서가 열렸을 때만 생기는 메뉴입니다.


도움말 메뉴

[도움말] 메뉴는 도움말과 웹캔버스 정보를 보여주는 하위 메뉴로 구성되어 있습니다.

파일

편집

보기

수정

효과

창

도움말

웹캔버스 도움말 | 웹캔버스 도움말을 실행합니다. 도움말 구성 도움말 사용자 설정
웹캔버스 정보 | 웹캔버스에 대한 정보를 보여줍니다.


새 문서 만들기

문서를 새로 만듭니다. 여러 개의 문서를 열어 놓고 작업할 수 있습니다.

  1. 메뉴에서 [파일 > 새 문서]를 선택하거나, 기본 도구 막대에서 새 문서 [image] 를 누릅니다.
  2. 새 문서 대화 상자에서 문서의 이름과 속성을 지정합니다.
  3. 확인 단추를 누릅니다.

새로 만들어지는 문서의 이름은 기본값으로 '문서1, 문서2, 문서3...'과 같이 지정됩니다. 문서의 이름은 웹캔버스의 제목 막대에 표시되며, 문서를 저장할 때 파일명으로 사용됩니다. 원하는 파일명으로 문서 이름을 지정하시기 바랍니다.


기존 문서 열기

이미 만들어서 저장해 두었던 문서를 엽니다. 열기를 통해 열 수 있는 문서는 웹캔버스의 고유 파일 형식인 *.tng 파일입니다. 이전 스마트 버튼 파일(*.npi)은 가져오기를 통해 열 수 있습니다.

  1. 메뉴에서 [파일 > 열기]를 선택하거나, 기본 도구 막대에서 열기 [image] 를 누릅니다.
  2. 열기 대화 상자에서 파일(*.tng)을 지정하고 열기 단추를 누릅니다.
  3. 선택한 문서가 편집 창에 열립니다.

최근에 작업한 문서는 파일 메뉴 아래에 나타나는 문서 목록에서 선택하여 열 수 있습니다. 여러 개의 문서를 열었을 경우 <Ctrl+Tab>키를 눌러서 다음 문서로 이동할 수 있습니다.


최근 문서 열기

최근에 작업한 문서는 최대 4개까지 [파일] 메뉴 하위에 나타납니다. 원하는 파일을 메뉴에서 선택하여 바로 열 수 있습니다.

여러 개의 문서를 열고 작업할 때, [창] 메뉴 아래의 문서 목록을 이용하면 특정 문서로 바로 이동할 수 있습니다.


문서 정보 넣기

문서를 SVG 파일로 내보냈을 때, SVG 파일에 <title>, <desc>요소로 들어갈 정보를 입력합니다.

  1. 문서 정보를 넣을 문서를 엽니다.
  2. 메뉴에서 [파일 > 문서 정보]를 실행합니다.
  3. 문서 정보 대화 상자에서 문서의 제목과 설명을 입력합니다.
  4. 확인 단추를 누릅니다.


문서 속성 바꾸기

현재 편집 창에 열려 있는 문서의 속성을 변경할 수 있습니다.

  1. 메뉴에서 [수정 > 문서 속성]을 선택합니다.
  2. 문서 속성 대화 상자에서 문서의 너비, 높이, 배경색을 지정합니다. 문서 배경을 투명하게 하려면 투명을 선택합니다.
  3. 확인 단추를 누릅니다. 문서 속성이 지정한 대로 변경됩니다.


새 문서 대화 상자

[파일 > 새 문서]

이름

새로 만들 문서의 이름을 입력합니다. 새로 만들어지는 문서의 이름은 기본값으로 '문서1, 문서2, 문서3...'과 같이 지정됩니다. 문서의 이름은 편집 창의 제목 막대에 표시되며, 문서를 저장할 때 파일명으로 사용됩니다.

문서 속성

  • 너비
    문서 너비를 픽셀 단위로 지정합니다. 증감 단추를 누르거나 숫자를 입력합니다.
  • 높이
    문서 높이를 픽셀 단위로 지정합니다. 증감 단추를 누르거나 숫자를 입력합니다.
  • 배경색
    문서의 배경색을 지정합니다. 색깔 단추를 눌러 색깔 편집 대화 상자에서 문서 색깔을 선택합니다.
  • 투명
    선택하면 문서의 배경색이 투명으로 지정됩니다.


문서 정보 대화 상자

[파일 > 문서 정보]

  • 제목
    SVG 소스의 <title> 요소를 입력합니다.
  • 설명
    SVG 소스의 <desc> 요소를 입력합니다. 이 내용은 검색 엔진에서 이미지 검색어로 사용되며, 이미지의 설명으로 나타납니다.

문서 정보는 작업한 그림을 SVG 파일로 내보냈을 때에만 사용됩니다. 비트맵 파일(*.bmp, *.gif, *.jpg)로 내보내거나 웹캔버스 파일(*.tng)로 저장할 때는 사용되지 않습니다.


문서 속성 대화 상자

[수정 > 문서 속성]

  • 너비
    문서의 너비를 픽셀 단위로 지정합니다. 증감 단추를 누르거나 숫자를 입력합니다.
  • 높이
    문서의 높이를 픽셀 단위로 지정합니다. 증감 단추를 누르거나 숫자를 입력합니다.
  • 배경색
    문서 배경색을 지정합니다. 색깔 단추를 눌러 색깔 편집 대화 상자에서 문서 배경색을 선택합니다.
  • 투명
    선택하면 문서의 배경색이 투명으로 지정됩니다.


개체란?

웹캔버스에서 개체는 이미지를 구성하는 최소 단위입니다. 하나의 이미지는 1개 이상의 시트로 구성되며, 하나의 시트는 1개 이상의 레이어로 구성되고, 하나의 레이어는 1개 이상의 개체 또는 그룹으로 구성됩니다. 1개 이상의 개체가 모여 그룹을 형성하며, 넓은 의미에서의 개체에는 그룹, 레이어, 시트가 모두 포함됩니다. 개체의 종류는 다음과 같습니다.

기본 도형

원, 사각형 등 자주 사용되는 기본 도형을 도형 개체로 삽입할 수 있습니다. 원하는 크기와 모양을 지정하여 만들 수 있으며, 도구 옵션에서 패스로 만들기 옵션을 이용하여 도형을 패스 개체로 생성할 수 있습니다.

글자와 글자 패스

글자는 글자 개체와 글자 패스 개체를 이용하여 삽입할 수 있습니다. 글자 개체는 직선 형태의 글자를 입력할 때 사용합니다. 원하는 글꼴, 크기, 모양을 지정할 수 있고 가로 쓰기, 세로 쓰기가 가능합니다. 곡선 형태로 글자를 입력하려면 글자 패스 개체로 삽입해야 합니다. 글자 패스 개체를 만들려면 먼저 글자의 흐름선이 될 패스 개체를 작성해야 합니다.

패스

패스 개체는 여러 개의 조절점을 연결하여 만든 직선 또는 곡선을 말합니다. 원하는 형태의 자유 곡선을 펜으로 그리듯이 작성하여 패스 개체로 만들 수 있습니다. 조절점의 위치와 방향에 의해 패스의 형태가 결정됩니다.

비트맵 그림

가져오기를 실행하여 비트맵 파일(*.bmp, *.jpg; *.jpeg, gif, *.png)을 그림 개체로 삽입할 수 있습니다. 비트맵 개체는 회전, 기울이기 등의 변형 편집은 가능하지만 벡터 개체가 갖는 채우기/테두리 속성을 갖지 못합니다.

1개 이상의 개체를 하나로 묶어서 그룹 개체를 만들 수 있습니다. 서로 다른 종류의 개체일 경우도 그룹으로 묶을 수 있으며, 필요에 따라 그룹을 다시 풀 수 있습니다. 그룹에 특정 효과를 적용하면 그룹 내의 모든 개체에 동시에 적용됩니다.


개체 만들기

개체는 이미지를 구성하는 요소입니다. 작업 도구와 모양 라이브러리를 이용하면 다양한 종류의 개체를 만들 수 있습니다. 삽입할 수 있는 개체에는 도형, 모양, 글자 등이 있으며 패스 도구를 이용하여 직접 그려서 만들거나 비트맵 파일을 삽입하여 만들 수도 있습니다.

기본 도형 삽입하기

도형 도구를 이용하여 여러 가지 모양의 도형을 삽입할 수 있습니다.

    • 원 삽입하기
    • 타원 삽입하기
    • 다각형 삽입하기
    • 별 삽입하기
    • 사각형 삽입하기
    • 둥근 사각형 삽입하기

모양 삽입하기

기본 도형으로 만들기 까다로운 형태의 개체를 모양 형태로 제공합니다. 미리 만들어진 벡터 개체인 모양을 삽입할 수 있습니다.

    • 모양 삽입하기
    • 모양 추가하기

패스 그리기

원하는 형태의 자유 곡선을 펜으로 그리듯이 작성할 수 있습니다.

    • 패스 그리기
    • 직선 그리기
    • 곡선 그리기

글자 삽입하기

직선 형태 또는 자유 곡선 형태의 글자를 삽입할 수 있습니다.

    • 글자 삽입하기
    • 글자 패스 삽입하기

파일 가져오기

비트맵 파일(*.bmp, *.jpg; *.jpeg, gif, *.png), 일러스트레이터 파일(*.ai), 나모 웹에디터 4 스마트 버튼 파일(*.npi)을 가져와 삽입할 수 있습니다.

    • 비트맵 파일 가져오기
    • 일러스트레이터 파일 가져오기
    • 스마트 버튼 파일 가져오기


개체 삭제하기

문서에 삽입한 개체 중에서 불필요한 것은 선택하여 삭제할 수 있습니다.

개체 삭제하기

  1. 작업 도구에서 선택 [image] 도구를 선택합니다.
  2. 삭제할 개체를 선택합니다. 개체의 주변에 선택 영역이 표시됩니다.
  3. 메뉴에서 [편집 > 지우기]를 선택하거나 <Del>키를 누릅니다.

여러 개체 삭제하기

  1. 작업 도구에서 선택 [image] 도구를 선택합니다.
  2. <Shift>키를 누른 채로 개체를 차례로 선택하거나, 문서 위를 마우스로 누른 채 끌어서 삭제할 개체가 모두 포함되도록 하여 여러 개의 개체를 선택합니다.
  3. 메뉴에서 [편집 > 지우기]를 선택하거나 <Del>키를 누릅니다.


도형이란?

웹캔버스에서 도형은 W3C의 Scalable Vector Graphics(SVG) 1.0 Specification을 기초로 제공됩니다. 웹캔버스에서 작업 도구를 이용하여 삽입할 수 있는 기본 도형에는 크게 다음과 같은 5가지 종류가 있습니다.

  • 타원
    SVG Specification에서 'ellipse'로 지정되어 있는 도형입니다. 타원 대화 상자에서 너비, 높이, 시작 좌표를 지정하여 만들 수 있습니다.
  • 다각형
    SVG Specification에서 'polygon'으로 지정되어 있는 도형입니다. 다각형 대화 상자에서 반지름, 꼭지점 개수, 중점 위치를 지정하여 만들 수 있습니다.
  • 별
    SVG Specification에서 'polygon'으로 지정되어 있는 도형입니다. 별 대화 상자에서 바깥쪽 반지름, 안쪽 반지름, 꼭지점 개수, 중점 위치를 지정하여 만들 수 있습니다.
  • 사각형
    SVG Specification에서 'rect'로 지정되어 있는 도형입니다. 사각형 대화 상자에서 너비, 높이, 시작 좌표를 지정하여 만들 수 있습니다.
  • 둥근 사각형
    SVG Specification에서 'rect'로 지정되어 있는 도형입니다. 사각형 대화 상자에서 너비, 높이, 원호 길이, 원호 높이, 시작 좌표를 지정하여 만들 수 있습니다.

타원, 사각형, 둥근 사각형 도형의 X/Y 좌표의 기준점은 기본 선택 영역의 시작 X/시작 Y 좌표로 계산합니다.

패스 개체인 다각형, 별은 한 번 작성된 후 선택 도구로 더블 클릭하여 속성을 바꿀 수 없습니다. 이에 비해 사각형, 둥근 사각형, 타원은 작성 후 더블 클릭하여 속성을 변경할 수 있습니다. 사각형과 둥근 사각형의 경우에도 도구 옵션에서 패스 만들기를 선택하여 패스로 생성된 경우에는 더블 클릭으로 속성을 변경할 수 없습니다.


원 삽입하기

타원 도구를 이용하여 편집 창에 원을 그릴 수 있습니다.

타원 도구로 그리기

  1. 작업 도구에서 타원 [image] 도구를 선택합니다.
  2. <Shift>키를 누른 채로 편집 창의 한 점을 마우스를 누른 채 끌어서 원을 그립니다.

원을 패스로 생성하지 않으려면 도구 옵션에서 패스로 만들기를 선택 해제합니다.

원 삽입하기

  1. 작업 도구에서 타원 [image] 도구를 선택합니다.
  2. 편집 창에서 원을 삽입할 위치를 클릭합니다.
  3. 타원 대화 상자에서 너비, 높이에 같은 값을 입력합니다. 위치를 변경하려면 시작 좌표 X, 시작 좌표 Y를 입력합니다.
  4. 확인 단추를 누르면 원이 삽입됩니다.


타원 삽입하기

타원 도구를 이용하여 편집 창에 타원을 그릴 수 있습니다.

타원 도구로 그리기

  1. 작업 도구에서 타원 [image] 도구를 선택합니다.
  2. 편집 창의 한 점을 마우스를 누른 채 끌어서 원을 그립니다. <Shift>키를 누른 채로 타원을 그리면 원이 그려집니다.

타원을 패스로 생성하지 않으려면 도구 옵션에서 패스로 만들기를 선택 해제합니다.

타원 삽입하기

  1. 작업 도구에서 타원 [image] 도구를 선택합니다.
  2. 편집 창에서 타원을 삽입할 위치를 클릭합니다.
  3. 타원 대화 상자에서 너비, 높이를 입력합니다. 위치를 지정하려면 시작 좌표 X, 시작 좌표 Y를 입력합니다.
  4. 확인 단추를 누르면 문서에 타원이 삽입됩니다.

선택 [image] 도구를 누른 다음, 편집 창에 삽입한 타원을 더블 클릭하면 타원 대화 상자가 나타납니다. 대화 상자에서 도형의 속성을 변경할 수 있습니다.


다각형 삽입하기

다각형 도구를 이용하여 편집 창에 다각형을 그릴 수 있습니다.

다각형 도구로 그리기

  1. 작업 도구에서 다각형 [image] 도구를 선택합니다.
  2. 도구 옵션에서 꼭지점 개수를 지정합니다.
  3. 편집 창에서 다각형의 중점에 해당하는 점을 마우스를 누른 채 끌어 다각형을 그립니다.

다각형 삽입하기

  1. 작업 도구에서 다각형 [image] 도구를 선택합니다.
  2. 편집 창에서 다각형을 삽입할 위치를 클릭합니다.
  3. 다각형 대화 상자가 나타나면 반지름, 꼭지점 개수를 입력합니다. 위치를 지정하려면 중점 X, 중점 Y를 입력합니다.
  4. 확인 단추를 누르면 지정한 다각형이 삽입됩니다.


별 삽입하기

별 도구를 이용하여 편집 창에 별 도형을 그릴 수 있습니다.

별 도구로 그리기

  1. 작업 도구에서 별 [image] 도구를 선택합니다.
  2. 도구 옵션에서 꼭지점 개수와 안쪽 반지름을 지정합니다.
  3. 별의 중점에 해당하는 위치를 문서에서 선택한 채 마우스를 누른 채 끌어 별을 그립니다.

별 삽입하기

  1. 작업 도구에서 별 [image] 도구를 선택합니다.
  2. 편집 창에서 별을 삽입할 위치를 클릭합니다.
  3. 별 대화 상자에서 바깥쪽 반지름, 안쪽 반지름, 꼭지점 개수를 입력합니다. 위치를 변경하려면 중점 X, 중점 Y를 입력합니다.
  4. 확인 단추를 누르면 지정한 위치에 별이 삽입됩니다.

    5. 예) 안쪽 반지름 비율과 별 모양

    안쪽 반지름 = 50%

    안쪽 반지름 = 25%


사각형 삽입하기

사각형 도구를 이용하여 편집 창에 사각형을 그릴 수 있습니다.

사각형 도구로 그리기

  1. 작업 도구에서 사각형 [image] 도구를 선택합니다.
  2. 편집 창에서 사각형의 한쪽 꼭지점에 해당하는 위치를 마우스로 누른 채 끌어서 사각형을 그립니다. <Shift>키를 누른 채로 사각형을 그리면 정사각형이 그려집니다.

사각형을 패스로 생성하지 않으려면 도구 옵션에서 패스로 만들기를 선택 해제합니다.

사각형 삽입하기

  1. 작업 도구에서 사각형 [image] 도구를 선택합니다.
  2. 편집 창에서 사각형을 삽입할 위치를 클릭합니다.
  3. 사각형 대화 상자가 나타나면 너비, 높이를 입력합니다. 위치를 지정하려면 시작 좌표 X, 시작 좌표 Y를 입력합니다.
  4. 확인 단추를 누르면 문서에 지정된 사각형이 삽입됩니다.

선택 [image] 도구를 누른 다음, 편집 창에 삽입한 사각형을 더블 클릭하면 사각형 대화 상자에서 도형의 속성을 변경할 수 있습니다.


둥근 사각형 삽입하기

둥근 사각형 도구를 이용하여 모서리가 둥근 사각형을 삽입할 수 있습니다.

둥근 사각형 도구로 그리기

  1. 작업 도구에서 둥근 사각형 [image] 도구를 선택합니다.
  2. 도구 옵션에서 모서리의 호 X, 호 Y를 지정합니다. 호 X, 호 Y의 수치를 크게 할수록 모서리가 둥글게 만들어집니다.
  3. 편집 창에서 둥근 사각형의 한 쪽 꼭지점에 해당하는 위치를 마우스로 누른 채 끌어서 둥근 사각형을 그립니다. <Shift>키를 누른 채 둥근 사각형을 그리면 너비와 높이가 같은 둥근 정사각형이 그려집니다.

둥근 사각형을 패스로 생성하지 않으려면 도구 옵션에서 패스로 만들기를 선택 해제합니다.

둥근 사각형 삽입하기

  1. 작업 도구에서 둥근 사각형 [image] 도구를 선택합니다.
  2. 편집 창에서 둥근 사각형을 삽입할 위치를 클릭합니다.
  3. 사각형 대화 상자가 나타나면 너비, 높이, 호 X, 호 Y를 지정합니다. 위치를 변경하려면 시작 좌표 X, 시작 좌표 Y를 지정합니다.
  4. 확인 단추를 누르면 문서에 지정된 둥근 사각형이 삽입됩니다.

선택 [image] 도구를 누른 다음, 편집 창에 삽입한 둥근 사각형을 더블 클릭하면 둥근 사각형 대화 상자가 나타납니다. 대화 상자에서 도형의 속성을 변경할 수 있습니다.


도형 수정하기

편집 창에 삽입한 도형의 크기, 위치, 모양 등의 속성을 변경할 수 있습니다.

  1. 작업 도구에서 선택 [image] 도구를 선택합니다.
  2. 편집 창에서 도형을 선택합니다. 도형의 주위에 선택 영역 조절점이 표시됩니다.
  3. 다음 중 한 가지 방법을 이용합니다.
    • 도형의 크기를 변경하려면 선택 영역 조절점 중 하나를 누른 채 끌어서 크기를 조절합니다.
    • 도형의 위치를 변경하려면 도형을 누른 채 끌어서 위치를 조절합니다.
    • 속성 창의 변형 탭에서 X,(왼쪽) Y(위쪽), W(너비), H(높이)를 변경합니다.

타원, 사각형, 둥근 사각형 개체는 선택 [image] 도구를 누른 다음, 개체를 더블 클릭하면 해당 도형 대화 상자가 나타납니다. 대화 상자를 이용하여 도형의 크기, 위치 등의 속성을 변경할 수도 있습니다.

별, 다각형은 패스로 그려진 도형입니다. 타원, 사각형, 둥근 사각형도 패스 만들기 옵션을 이용하여 만들었을 경우에는 패스로 그려집니다. 패스 도형은 직접 선택 [image] 도구를 이용하여 조절점을 이동시켜 모양을 수정할 수 있습니다.


타원 대화 상자

[작업 도구 > 타원 [image] 도구 > 편집 창 선택]

크기

  • 너비
    타원의 가로 지름을 지정합니다.
  • 높이
    타원의 세로 지름을 지정합니다.

위치

  • 시작 좌표 X
    타원을 포함하는 기본 선택 영역의 왼쪽 위 꼭지점의 X좌표에 해당합니다.
  • 시작 좌표 Y
    타원을 포함하는 기본 선택 영역의 왼쪽 위 꼭지점의 Y좌표에 해당합니다.


다각형 대화 상자

[작업 도구 > 다각형 도구 > 편집 창 선택]

옵션

  • 반지름
    다각형의 중점으로부터 꼭지점까지의 길이를 지정합니다.
  • 꼭지점 개수
    다각형의 꼭지점 개수를 지정합니다.

위치

  • 중점 X/중점 Y
    다각형 중점의 X, Y 좌표를 지정합니다.


별 대화 상자

[작업 도구 > 별 도구 > 편집 창 선택]

옵션

  • 바깥쪽 반지름
    별의 중점으로부터 바깥쪽 꼭지점까지의 길이를 픽셀로 지정합니다.
  • 안쪽 반지름
    별의 중점으로부터 안쪽 꼭지점까지의 길이를 픽셀로 지정하거나 바깥 반지름과 안쪽 반지름 길이의 비율을 퍼센트로 지정합니다.
  • 꼭지점 개수
    별의 꼭지점 개수를 지정합니다.

위치

  • 중점 X/중점Y
    별 중점의 X, Y 좌표를 지정합니다.


사각형 대화 상자

[작업 도구 > 사각형 도구 > 편집 창 선택]

크기

  • 너비
    둥근 사각형의 너비를 지정합니다.
  • 높이
    둥근 사각형의 높이를 지정합니다.
  • 호 X
    모서리의 원호 길이를 '픽셀'이나 '%' 단위로 지정합니다.

            •

    호 X : 5픽셀

    호 X : 20픽셀
  • 호 Y
    모서리의 원호 높이를 '픽셀'이나 '%' 단위로 지정합니다.

            •

    호 Y : 5픽셀

    호 Y : 20픽셀

위치

  • 시작 좌표 X
    사각형의 왼쪽(X) 꼭지점에 해당하는 위치입니다.
  • 시작 좌표 Y
    사각형의 위쪽(Y) 꼭지점에 해당하는 위치입니다.


모양이란?

"모양"이란 웹캔버스에서 제공하는 벡터 개체를 말합니다. 사용자들이 많이 쓰는 개체 모양을 라이브러리로 제공하므로 필요할 때마다 개체를 다시 제작하지 않아도 됩니다. 또한, 사용자가 직접 만들거나 수정한 도형을 모양으로 추가할 수도 있고, 자주 쓰이지 않는 모양은 삭제할 수 있습니다. 모양 탭을 이용하여 자주 쓰는 도형이나 패스, 글자 등을 모양 라이브러리에 등록하고, 필요할 때마다 바로 사용할 수 있어 작업의 효율성을 높일 수 있습니다.

예) 모양의 사용 예

모양은 라이브러리 창의 모양 탭에서 라이브러리 형태로 관리됩니다. 웹캔버스에서는 모양의 종류에 따라 그림 문자 라이브러리, 기본 라이브러리, 기호 라이브러리, 도표 라이브러리, 웹사이트 라이브러리를 제공합니다. 사용자는 직접 만든 여러 개의 모양을 포함하는 라이브러리 파일을 저장하고 관리할 수 있습니다.

기본 라이브러리(기본 라이브러리.shp)

웹캔버스에서 모양 라이브러리 파일은 나모 웹에디터 5 파워 플러스가 설치된 폴더 아래 lib\WebCanvas 폴더의 하위 Shape 폴더에 .shp 확장자를 가진 파일로 저장됩니다.

그림 문자 라이브러리.shp | 기호 라이브러리.shp
도표 라이브러리.shp | 웹 사이트 라이브러리.shp


모양 삽입하기

라이브러리 창의 모양 탭에서 모양을 선택하여 모양 개체를 만들 수 있습니다. 모양을 이용하면 다양한 모양의 도형을 일일이 그릴 필요 없이 모양 탭에서 원하는 것을 선택하여 마우스로 끌어서 삽입할 수 있습니다.

  1. 라이브러리 창의 모양 탭에서 원하는 모양을 선택합니다.
  2. 모양을 마우스로 누른 채 끌어서 편집 창의 원하는 위치로 옮깁니다.
  3. 선택한 모양이 편집 창에 삽입되어 나타납니다.

사용자가 직접 만든 도형을 모양 목록에 추가하거나 불필요한 모양을 삭제하여, 사용하기 편리하도록 모양 라이브러리를 관리할 수도 있습니다.


모양 추가하기

직접 만든 개체를 모양 라이브러리에 추가해 놓으면 필요할 때마다 반복적으로 사용할 수 있습니다.

모양 추가하기

  1. 작업 도구에서 선택 [image] 도구를 선택합니다.
  2. 모양 라이브러리에 추가할 개체를 편집 창에서 선택합니다.
  3. 라이브러리 창 모양 탭의 하위 메뉴에서 [추가하기]를 선택하거나 모양 추가하기 [image] 단추를 누릅니다.
  4. 모양 라이브러리에 선택한 개체가 추가됩니다.

편집 창에서 개체를 선택한 다음, 모양 라이브러리의 원하는 위치로 마우스를 누른 채 끌어 추가할 수도 있습니다.


모양 삭제하기

불필요한 모양을 라이브러리에서 삭제할 수 있습니다.

모양 삭제하기

  1. 라이브러리 창 모양 탭에서 삭제할 모양을 선택합니다.
  2. 하위 메뉴에서 [삭제하기]를 선택하거나 모양 삭제하기 [image] 단추를 누릅니다.
  3. 모양 목록에서 선택한 모양이 삭제됩니다.


모양 라이브러리 관리하기

모양 탭의 여러 메뉴를 이용해서 모양 라이브러리를 관리할 수 있습니다.

  • 라이브러리 열기
  • 새 라이브러리 만들기
  • 다른 라이브러리로 저장하기
  • 모양 추가하기


패스란?

패스

직선 패스와 곡선 패스

패스

패스란 여러 개의 조절점을 연결하여 만든 직선 또는 곡선을 말합니다. 조절점의 위치와 방향에 의해 패스의 형태가 결정됩니다. 시작점과 끝점으로 구성되며, 시작점과 끝점이 다른 경우를 열린 패스, 시작점과 끝점이 만나는 경우를 닫힌 패스라고 합니다.

직선 패스와 곡선 패스

직선 패스는 핸들이 없는 조절점의 연속으로 그려지고 곡선 패스는 핸들이 있는 조절점의 연속으로 그려집니다. 펜 [image] 도구를 이용하여 문서 위에서 원하는 위치를 바로 선택하면 핸들이 없는 조절점이 추가되면서 직선 패스가 그려집니다.

마우스로 원하는 조절점 위치를 선택한 채 곡선의 진행 방향으로 끌었다가 놓으면 핸들이 있는 곡선 조절점이 추가되면서 곡선 패스가 그려집니다. 곡선 패스의 굴곡은 직접 선택 [image] 도구를 이용하여 조절할 수 있습니다.

조절점 변환 [image] 도구를 이용하면 직선 조절점을 곡선 조절점으로, 곡선 조절점을 직선 조절점으로 변환할 수 있습니다.


조절점과 핸들

조절점과 핸들

조절점은 패스의 굴곡 간격을 결정하는 중심점이며, 조절점을 양옆에 직선 형태로 표시되는 것이 핸들입니다. 핸들의 방향과 길이를 조정하여 패스의 방향과 기울기를 수정할 수 있습니다. 직선 패스의 경우에는 조절점 양옆에 핸들이 표시되지 않습니다.

조절점을 선택, 이동, 추가, 삭제, 변환하여 패스를 편집할 수 있습니다.

  • 조절점 선택하기
  • 조절점 이동하기
  • 조절점 추가하기
  • 조절점 삭제하기
  • 조절점 변환하기
  • 핸들 다루기


패스 그리기

작업 도구의 펜 [image] 도구를 이용하면 직선이나 곡선 형태의 패스를 원하는 형태로 그릴 수 있습니다. 패스를 그리면 기본값으로 패스의 방향을 표시하는 화살표가 나타납니다. 패스의 방향 표시를 보이지 않게 하려면 프로그램 설정 대화 상자의 일반 탭에서 패스 방향 표시를 선택 해제합니다.

패스 작성하기

  • 직선 패스 그리기
  • 곡선 패스 그리기
  • 열려 있는 패스 닫기
  • 패스 이어서 그리기
  • 패스 방향 바꾸기
펜 [image] 도구로 패스를 그리다가 더블 클릭을 하면 현재의 패스 그리기를 마치고 새로운 패스를 그릴 수 있습니다.

조절점을 이용하여 패스 수정하기

  • 직접 선택 [image] 도구로 개체의 조절점을 선택하여 조절점의 위치를 이동하거나 핸들을 수정할 수 있습니다.
  • 조절점 추가 [image] 도구로 패스를 선택하면 조절점을 추가할 수 있습니다.
  • 조절점 삭제 [image] 도구로 조절점을 선택하면 조절점을 삭제할 수 있습니다.
  • 조절점 변환 [image] 도구로 핸들을 만들거나 제거하여 직선을 곡선으로 바꾸거나 곡선을 직선으로 바꿀 수 있습니다.


직선 그리기

펜 [image] 도구를 이용하여 직선으로 이루어진 다양한 형태의 패스를 그릴 수 있습니다. 패스를 그리면 기본값으로 패스의 방향을 표시하는 화살표가 나타납니다. 패스의 방향 표시를 보이지 않게 하려면 프로그램 설정 대화 상자의 일반 탭에서 패스 방향 표시를 선택 해제합니다.

닫힌/열린 직선 개체 그리기

  1. 작업 도구에서 펜 [image] 도구를 선택합니다.
  2. 패스의 시작점에 해당하는 위치를 문서에서 선택합니다.
  3. 두 번째 조절점에 해당하는 위치를 선택합니다.
  4. 계속해서 조절점을 추가하여 원하는 형태의 직선 패스를 만듭니다.
  5. 닫힌 직선이나 열린 직선 패스를 그리기 위해 다음 중 하나를 선택합니다.
    • 마지막으로 패스의 시작점을 다시 선택하면 패스가 닫히면서 닫힌 직선 패스가 그려집니다.
    • 패스를 연 채로 작업 도구에서 선택 [image] 도구를 눌러 그리기를 마치면 열린 직선 패스가 그려집니다.
펜 도구로 패스를 그리다가 더블 클릭을 하면 현재의 패스 그리기를 마치고 새로운 패스를 그릴 수 있습니다.


곡선 그리기

열린 곡선 그리기

닫힌 곡선 그리기

베지어(Bezier) 곡선

펜 [image] 도구를 이용하면 직선뿐만 아니라 다양한 형태의 곡선을 자유롭게 그릴 수 있습니다. 패스를 그리면 기본값으로 패스의 방향을 표시하는 화살표가 나타납니다. 패스의 방향 표시를 보이지 않게 하려면 프로그램 설정 대화 상자의 일반 탭에서 패스 방향 표시를 선택 해제합니다.
베지어(Bezier) 곡선의 원리를 이용한 곡선 그리기는 여러 개의 조절점을 이용하여 곡선의 윤곽을 정밀하게 만들 수 있습니다.

열린 곡선 그리기

  1. 작업 도구에서 펜 [image] 도구를 선택합니다.
  2. 작업 창에서 패스의 시작점에 해당하는 위치를 선택합니다.
  3. 패스의 두 번째 조절점을 마우스로 누른 채 원하는 방향으로 끌어서 곡선의 굴곡을 조절합니다.
    • 마우스를 아래쪽으로 끌어 내리면 위가 볼록한 곡선이 만들어집니다.
    • 마우스를 위쪽으로 끌어 올리면 아래가 볼록한 곡선이 만들어집니다.
  4. 계속해서 조절점을 추가하여 패스를 그립니다.
  5. 작업 도구에서 선택 [image] 도구를 눌러 그리기를 마칩니다.
펜 도구로 패스를 그리다가 더블 클릭을 하면 현재의 패스 그리기를 마치고 새로운 패스를 그릴 수 있습니다.

닫힌 곡선 그리기

  1. 펜 [image] 도구를 이용하여 문서에서 패스의 시작점에 해당하는 위치를 선택합니다.
  2. 패스의 조절점을 추가하여 곡선의 형태를 만듭니다.
  3. 끝점을 기준으로 곡선의 형태를 이어갑니다.
  4. 끝점을 시작점에 놓고, 곡선을 닫습니다.
  5. 핸들과 조절점을 이용하여 곡선을 부드럽게 만들고, 다양한 효과를 줍니다.
펜 도구로 패스를 그리다가 더블 클릭을 하면 현재의 패스 그리기를 마치고 새로운 패스를 그릴 수 있습니다.

베지어 곡선

불규칙적인 곡선을 수학적으로 표현하기 위해 만든 것으로 프랑스의 수학자 베지어에 의해 만들어진 다항식 곡선의 하나입니다. 아웃라인 문자, 스플라인 곡선, 포스트 스크립트 등 문자 데이터와 도형을 그릴 때의 자유 곡선은 베지어 곡선을 이용합니다. 베지어 곡선은 조절점이라고 하는 몇 개의 점으로 만들어 집니다.
곡선은 최초의 시작점에서 시작하여 최후의 조절점인 끝점에서 끝납니다. 시작점(A)에서 시작한 곡선은 이웃한 조절점(B)의 영향을 받아 곡선을 형성하는데, 이 때 형성되는 곡선은 조절점 B와 사용자의 마우스 움직임에 의해 형성되는 B1, B2의 조절점을 잇는 직선의 길이와 각도에 의해 호(곡선)의 길이와 기울기가 결정됩니다.

이와 같은 원리를 이용하면 여러가지 매끄러운 곡선을 그릴 수 있습니다. 조절점의 개수가 많을 수록 다양한 곡선을 만들 수 있습니다.


직선을 곡선으로 바꾸기

조절점 변환 [image] 도구를 이용하여 직선 조절점을 곡선 조절점으로 변환할 수 있습니다.

  1. 작업 도구에서 직접 선택 [image] 도구를 선택합니다.
  2. 곡선으로 바꿀 직전 조절점이 있는 패스 개체를 선택합니다.
  3. 작업 도구에서 조절점 변환 [image] 도구를 선택합니다.
  4. 패스에서 핸들이 없는 직선 조절점을 마우스로 누른 채 끌어서 핸들의 길이와 각도를 지정합니다.
  5. 지정한 길이와 각도대로 곡선으로 바뀝니다.


곡선을 직선으로 바꾸기

조절점 변환 [image] 도구를 이용하여 곡선 패스를 직선 패스로 변환하기할 수 있습니다.

곡선을 직선으로 바꾸기

  1. 작업 도구에서 선택 [image] 도구를 선택합니다.
  2. 직선으로 바꿀 곡선 조절점이 있는 패스를 선택합니다.
  3. 작업 도구에서 조절점 변환 [image] 도구를 선택합니다.
  4. 패스에서 핸들이 있는 조절점을 선택하여 핸들을 없애면 직선으로 바뀌게 됩니다.


조절점 선택하기

모든 조절점 선택하기

  1. 작업 도구에서 직접 선택 [image] 도구를 선택합니다.
  2. 편집하려는 패스 개체의 안쪽을 선택합니다. 조절점 전체가 선택되어 파란색으로 칠해집니다.
  3. 마우스로 누른 채 끌면 개체가 이동됩니다.

특정 조절점 선택하기

  1. 작업 도구에서 직접 선택 [image] 도구를 선택합니다.
  2. 편집하려는 패스 개체의 조절점에 마우스 포인터를 가져가면 마우스 포인터의 모양이 [image] 로 바뀝니다.
  3. 마우스 포인터의 모양이 [image] 로 바뀌었을 때 클릭하면 해당 조절점만 선택되어 파란색으로 칠해집니다.
  4. 선택한 조절점의 위치를 변경할 수 있습니다.
  5. 계속 해서 다른 조절점을 선택하여 조절점 위치를 변경할 수 있습니다.

<Shift>키를 누른 채로 조절점을 선택하면 여러 개의 조절점을 추가로 선택할 수 있습니다. <Shift>키를 누른 채로 이미 선택된 조절점을 클릭하면 해당 조절점의 선택이 해제됩니다.

직접 선택 [image] 도구를 선택한 다음, 편집 창에서 패스 개체의 일부분을 마우스로 누른 채 끌면 사각형 내부에 포함되는 조절점만 모두 선택됩니다.


조절점 이동하기

조절점 이동하기

  1. 작업 도구에서 직접 선택 [image] 도구를 선택합니다.
  2. 편집하려는 패스 개체의 조절점을 선택합니다.
  3. 다음 중 한 가지 방법을 이용합니다.
    • 선택한 조절점을 마우스로 누른 채 끌어서 원하는 위치로 이동합니다.
    • 조절점을 선택한 상태에서 키보드의 방향키를 누르면 1픽셀씩 이동합니다.
    • 조절점을 선택한 상태에서 <Shift>키를 누른 채로 키보드의 방향키를 누르면 10픽셀씩 이동합니다.
2개 이상의 조절점을 선택하여 동시에 이동시킬 수 있습니다. <Shift>키를 누른 채로 조절점을 클릭하면 조절점을 추가로 선택 또는 선택 해제할 수 있습니다.


조절점 추가하기

패스에 있는 조절점을 추가하면 패스의 굴곡이나 꺽인 형태를 변경할 수 있습니다.

조절점 추가하기

  1. 작업 도구에서 직접 선택 [image] 도구를 선택합니다.
  2. 편집 창에서 조절점을 추가하려는 패스 개체를 선택합니다.
  3. 작업 도구에서 펜 [image] 도구나 조절점 추가 [image] 도구를 선택합니다.
  4. 패스에서 조절점을 추가하려는 위치를 선택합니다.
  5. 추가한 조절점의 위치를 바꾸려면, 작업 도구에서 직접 선택 [image] 도구를 선택한 다음, 패스의 조절점을 누른 채 끌어서 옮깁니다.


조절점 삭제하기

패스에 있는 조절점을 삭제하면 패스의 굴곡이나 꺾인 형태를 변경할 수 있습니다.

  1. 작업 도구에서 직접 선택 [image] 도구를 선택합니다.
  2. 조절점을 삭제하려는 패스 개체를 선택합니다.
  3. 작업 도구에서 펜 [image] 도구나 조절점 삭제 [image] 도구를 선택합니다.
  4. 패스에서 삭제하려는 조절점을 선택합니다.
  5. 선택한 조절점이 패스에서 삭제됩니다.
조절점을 선택한 뒤 <Del>키를 눌러도 조절점이 삭제됩니다. <Shift>키를 누른 채 2개 이상의 조절점을 선택하면 동시에 조절점을 삭제할 수 있습니다.


조절점 변환하기

조절점 변환 [image] 도구를 사용하면 핸들이 없는 조절점에는 핸들을 만들고, 핸들이 있는 조절점은 핸들을 제거하여 직선과 곡선을 마음대로 바꿀 수 있습니다.

  • 곡선을 직선으로 바꾸기
  • 직선을 곡선으로 바꾸기


핸들 다루기

핸들은 패스의 모양을 결정하는 중요한 요소입니다. 핸들을 적절히 조절함으로써 패스의 모양과 방향, 크기를 결정할 수 있습니다.

핸들 조절하기

핸들은 조절점의 양옆에 표시되는 보조선입니다. 직선 조절점에는 핸들이 표시되지 않습니다.

  • 조절점을 선택하면 조절점은 파란색으로 칠해진 정사각형, 양옆 핸들은 파란색으로 칠해진 원으로 표시됩니다.
  • 선택되지 않은 조절점들은 파란색의 빈 정사각형, 선택되지 않은 조절점의 핸들은 파란색 빈 원으로 표시됩니다.

핸들 삭제하기

지우고 싶은 방향의 핸들을 선택한 상태로(마우스 단추를 누른 채) <Del>키를 누르면 선택된 핸들이 삭제됩니다.


열려 있는 패스 닫기

열린 패스의 경우, 시작점과 끝점을 잇는 선을 그려서 닫힌 패스를 만들 수 있습니다. 패스를 그리면 기본값으로 패스의 방향을 표시하는 화살표가 나타납니다. 패스의 방향 표시를 보이지 않게 하려면 프로그램 설정 대화 상자의 일반 탭에서 패스 방향 표시를 선택 해제합니다.

  1. 작업 도구에서 직접 선택 [image] 도구를 선택합니다.
  2. 편집 창에서 열린 패스를 선택합니다.
  3. 작업 도구에서 펜 [image] 도구를 선택합니다.
  4. 패스의 시작점(또는 끝점)에서 마우스 포인터의 모양이 [image] 와 같이 변했을 때 시작점(또는 끝점)을 클릭합니다.
  5. 끝점(또는 시작점)에서 마우스 포인터의 모양이 [image] 와 같이 변했을 때 끝점(또는 시작점)을 클릭합니다.
  6. 두 점을 잇는 선이 그려지면서 패스가 닫힙니다.


패스 이어서 그리기

열린 패스의 시작점 또는 끝점을 선택하여 패스를 이어서 그릴 수 있습니다. 패스를 그리면 기본값으로 패스의 방향을 표시하는 화살표가 나타납니다. 패스의 방향 표시를 보이지 않게 하려면 프로그램 설정 대화 상자의 일반 탭에서 패스 방향 표시를 선택 해제합니다.

  1. 작업 도구에서 직접 선택 [image] 도구를 선택합니다.
  2. 이어서 그리려는 패스 개체를 편집 창에서 선택합니다.
  3. 작업 도구에서 펜 [image] 도구를 선택합니다.
  4. 이어서 그리려는 패스의 시작점 또는 끝점에서 마우스 포인터의 모양이 [image] 와 같이 변했을 때 클릭합니다.
  5. 조절점을 계속 추가하여 패스를 이어서 그립니다.
펜 도구로 패스를 그리다가 더블 클릭을 하면 현재의 패스 그리기를 마치고 새로운 패스를 그릴 수 있습니다.


패스 방향 바꾸기

패스 방향 바꾸기는 글자 패스의 순서와 방향을 바꾸기 위해 사용합니다.

  1. 작업 도구에서 선택 [image] 도구를 선택합니다.
  2. 편집 창에서 글자 패스 개체를 선택합니다.

  3. 메뉴에서 [수정 > 패스> 방향 바꾸기]를 선택합니다.
  4. 글자 패스의 순서가 바뀌어 나타납니다.


패스 자르기

패스 자르기 도구를 이용하여 패스 개체를 자를 수 있습니다.

  1. 작업 도구에서 직접 선택 [image] 도구를 선택합니다.
  2. 자를 패스 개체를 편집 창에서 선택합니다. 패스의 조절점이 나타납니다.
  3. 패스 자르기 [image] 도구를 선택합니다.
  4. 패스 개체에서 자르려는 위치를 클릭하여 패스를 자릅니다.

분리된 각각의 패스는 선택 [image] 도구 또는 직접 선택 [image] 도구를 이용하여 원하는 위치로 이동시킬 수 있습니다.


패스 합치기

열린 패스의 경우, 시작점과 끝점을 잇는 선을 그려서 닫힌 패스를 만들 수 있습니다.

  1. 작업 도구에서 직접 선택 [image] 도구를 선택합니다.
  2. 편집 창에서 합치려는 패스 중 첫 번째 것을 선택합니다.
  3. 작업 도구에서 펜 [image] 도구를 선택합니다.
  4. 패스의 시작점(또는 끝점)에서 마우스 포인터의 모양이 [image] 와 같이 변했을 때 시작점(또는 끝점)을 클릭합니다.
  5. 합치려는 패스 중 다른 하나의 끝점(또는 시작점)에서 마우스 포인터의 모양이 [image] 와 같이 변했을 때 끝점(또는 시작점)을 클릭합니다.
  6. 두 점을 잇는 선이 그려지면서 패스의 위쪽 부분이 연결됩니다.
  7. 첫 번째 패스의 끝점(또는 시작점)에서 마우스 포인터의 모양이 [image] 와 같이 변했을 때 끝점(또는 시작점)을 클릭합니다.
  8. 두 개의 패스가 하나로 합쳐집니다.


컴파운드 패스 만들기

선택한 개체들이 겹치는 부분을 투명하게 만들려면 컴파운드 패스 기능을 이용합니다.

  1. 작업 도구에서 선택 [image] 도구를 선택합니다.
  2. 편집 창에서 컴파운드 개체로 만들 개체들을 선택합니다.
  3. 메뉴에서 [수정 > 컴파운드 패스> 만들기]를 실행하거나 레이아웃 도구 막대의 컴파운드 패스 만들기 [image] 를 선택합니다.
  4. 레이어 창의 레이어 목록에 새로운 컴파운드 그룹 개체가 생기고, 선택한 개체들아 겹치는 부분이 투명하게 만들어집니다.
컴파운드 패스로 묶인 개체는 그룹 개체와 마찬가지로 선택이나 크기 조절 등의 동작이 함께 이루어집니다.


컴파운드 패스 풀기

선택한 개체들이 겹치는 부분을 투명하게 만든 컴파운드 패스를 원래의 개체들로 풀 수 있습니다.

  1. 작업 도구에서 선택 [image] 도구를 선택합니다.
  2. 편집 창에서 컴파운드 패스로 묶인 개체를 선택합니다.
  1. 메뉴에서 [수정 > 컴파운드 패스> 풀기]를 선택하거나 레이아웃 도구 막대의 컴파운드 패스 풀기 [image] 를 선택합니다.
  2. 컴파운드 패스로 묶인 개체들이 풀리면서 레이어 목록에 원래의 개체들이 나타납니다.


패스 도형 삽입하기

다각형, 별 도구로 삽입한 도형은 패스로 이루어져 있습니다. 따라서 패스 개체를 편집하는 것과 동일한 방법으로 편집할 수 있습니다.

  • 다각형 삽입하기
  • 별 삽입하기
  • 모양 삽입하기
타원, 사각형, 둥근 사각형으로 삽입한 도형일 경우 도구 옵션에서 패스로 만들기 옵션을 선택하면 패스 도형으로 삽입됩니다. 기본값으로 패스로 만들기 옵션이 선택되어 있습니다. 패스로 생성하지 않은 도형은 메뉴에서 [수정 > 패스로 변환하기]을 선택하여 패스로 변환할 수 있습니다.


도형을 패스로 변환하기

타원, 사각형, 둥근 사각형 도구로 만든 기본 도형을 패스로 변환할 수 있습니다. 도형을 패스로 변환하면 도형을 따라 글자 패스를 삽입할 수 있으며, 자유롭게 변형이 가능합니다.

  1. 작업 도구에서 선택 [image] 도구를 선택합니다.
  2. 편집 창에서 도형 개체를 선택합니다.
  3. 메뉴에서 [수정 > 패스로 변환하기]을 선택하거나 단축키 <Ctrl+Shift+O>를 누릅니다.
  4. 작업 도구에서 직접 선택 [image] 도구를 선택합니다.
  5. 패스로 변환된 도형 주변에 조절점이 나타납니다.


글자를 패스로 변환하기

글자를 패스로 변환할 수 있습니다. 글자를 패스로 변환하면 다양한 편집이 가능하며, 형태를 자유로이 바꿀 수 있습니다.

  1. 작업 도구에서 선택 [image] 도구를 선택합니다.
  2. 편집 창에서 글자 개체를 선택합니다.
  3. 메뉴에서 [수정 > 패스로 변환하기] 또는 단축키 <Ctrl+Shift+O>를 누릅니다. 글자가 패스로 변환됩니다.


글자와 글자 패스

웹캔버스에서 글자는 글자 개체와 글자 패스 개체를 이용하여 삽입할 수 있습니다.

글자 개체는 꺾이지 않은 직선 형태의 글자를 입력할 때 사용합니다. 원하는 글꼴, 크기, 모양을 지정할 수 있고 가로 쓰기, 세로 쓰기가 가능합니다. 글자 개체로 입력할 수 없는 곡선 형태 또는 꺾여진 직선 형태의 글자를 입력하려면 글자 패스 개체를 이용해야 합니다. 글자 패스는 패스 개체의 굴곡에 따라 글자를 입력하여 만드는 것으로, 글자 패스 개체를 만들려면 먼저 글자의 흐름선이 될 패스 개체를 먼저 작성해야 합니다.

  • 글자
  • 글자 패스


글자 삽입하기

글자의 쓰기 방향을 지정하여 원하는 형태로 글자를 입력할 수 있습니다.

  1. 작업 도구에서 글자 [image] 도구를 선택합니다.
  2. 편집 창에서 글자를 삽입할 위치를 선택합니다.
  3. 글자 대화 상자에서 글자의 내용을 입력하고 글꼴이나 크기, 쓰기 방향 등을 지정합니다. 줄 바꿈을 하여 여러 줄을 입력할 경우에는 <Ctrl+Enter>키를 누릅니다.

    4. 예) 가로 방향 [image] 으로 삽입한 글자

    예) 세로 방향 [image] 으로 삽입한 글자


글자 수정하기

문서에 삽입한 글자의 내용과 형태를 수정할 수 있습니다.

  1. 작업 도구에서 선택 [image] 도구를 선택합니다.
  2. 다음 중 한 가지 방법을 선택합니다.
    • 편집 창에서 글자 개체를 더블 클릭한 다음, 글자 대화 상자에서 글자 내용 및 쓰기 방향, 글꼴, 크기 등을 수정합니다.
    • 편집 창에서 글자 개체를 선택한 다음, 속성 창 글자 탭에서 글자 내용 및 쓰기 방향, 글꼴, 크기 등을 수정합니다.

선택 영역을 마우스로 누른 채 끌어서 글자 개체의 크기를 변경할 경우, 화면에 보이는 글자 크기는 변경되지만 이것은 벡터 개체의 크기 정보가 확대/축소되는 것으로, 글자 대화 상자의 글자 크기값은 변경되지 않습니다.


글자 패스 삽입하기

글자 패스를 이용하여 곡선 형태의 글자를 입력할 수 있습니다.

  1. 작업 도구에서 글자 패스 [image] 도구를 선택합니다.
  2. 편집 창에서 글자의 흐름선으로 사용할 패스 개체를 선택합니다. 패스 개체 위에서 마우스 포인터가 [image] 모양으로 바뀌었을 때 클릭합니다.
  3. 글자 패스 대화 상자에서 글자 내용을 입력하고 크기나 글꼴 등을 지정합니다.


글자 패스 수정하기

글자 패스의 내용과 형태를 원하는 모양으로 수정할 수 있습니다.

내용 수정하기

  1. 작업 도구에서 선택 [image] 도구를 선택합니다.
  2. 다음 중 한 가지 방법을 선택합니다.
    • 편집 창에서 글자 패스 개체를 더블 클릭한 다음, 글자 패스 대화 상자에서 글자 내용 및 쓰기 방향, 글꼴, 크기 등을 수정합니다.
    • 편집 창에서 글자 패스 개체를 선택한 다음, 속성 창 글자 탭에서 글자 내용 및 쓰기 방향, 글꼴, 크기 등을 수정합니다.

굴곡 수정하기

  1. 작업 도구에서 직접 선택 [image] 도구를 선택합니다.
  2. 편집 창에서 글자 패스 개체의 조절점을 선택합니다.
  3. 조절점을 편집하여 글자 패스의 굴곡을 수정합니다.


글자에 효과 주기

스타일을 이용하거나 효과를 적용하여 글자 개체를 꾸밀 수 있습니다.

스타일 적용하기

  1. 작업 도구에서 선택 [image] 도구를 선택합니다.
  2. 편집 창에서 글자 개체를 선택합니다.
  3. 라이브러리 창의 스타일 탭에서 원하는 스타일을 선택합니다.

효과 적용하기

  1. 작업 도구에서 선택 [image] 도구를 선택합니다.
  2. 편집 창에서 글자 개체를 선택합니다.
  3. [효과] 메뉴의 하위 항목에서 원하는 효과를 선택합니다.
    • 가장자리에 블러 효과를 주려면 [가우시안 블러 효과]를 선택합니다.

    • 그림자를 표시하여 입체적으로 보이게 하려면 [그림자 효과]를 선택합니다.

    • 단추와 같이 볼록하게 만들려면 [베벨 효과]를 선택합니다.

    • 네온 사인이나 형광등처럼 빛이 확산되는 효과를 주려면 [확산 효과]를 선택합니다.


글자 테두리 꾸미기

글자의 테두리 두께를 변경하여 테두리를 다양한 색깔, 모양으로 편집할 수 있습니다.

  1. 작업 도구에서 선택 [image] 도구를 선택합니다.
  2. 편집 창에서 글자 개체를 선택합니다.
  3. 속성 창의 테두리 탭에서 테두리 두께를 지정합니다. 글자의 테두리 두께 기본값은 '0'입니다. 테두리 두께를 '1' 이상으로 지정해야 테두리를 꾸밀 수 있습니다.
  4. 테두리 모양을 지정합니다. 점선, 실선 등 9가지 형태의 테두리 모양 중에서 선택할 수 있습니다.
  5. 테두리 단추의 펼침 목록을 누른 다음, 원하는 항목을 선택합니다.
  • 색깔 탭에서 원하는 색깔을 지정하면, 글자의 테두리에 색깔이 적용됩니다.
  • 그라디언트 탭에서 원하는 그라디언트를 지정하면, 글자의 테두리에 그라디언트가 적용됩니다.
  • 패턴 탭에서 원하는 패턴을 지정하면, 글자의 테두리에 패턴이 적용됩니다.


글자 대화 상자

[작업 도구 > 글자 [image] 도구 > 편집 창 선택]

  • 글꼴
    입력한 내용을 표시할 글꼴을 펼침 목록에서 지정합니다.
  • 크기
    글자 크기를 포인트 단위로 직접 입력하거나 증감 단추를 눌러서 지정합니다.
  • 스타일
    • 진하게 : 글자를 두껍게 합니다.
    • 이탤릭 : 글자를 기울입니다.
  • 쓰기 방향
    • 가로 쓰기 : 글자를 가로 방향으로 입력합니다.
    • 세로 쓰기 : 글자를 세로 방향으로 입력합니다.
  • 내용
    문서에 삽입할 글자 개체의 내용을 입력합니다. <Ctrl+Enter>키를 누르면 다음 줄을 입력할 수 있습니다.
  • 기준점
    글자를 정렬할 때 기준점을 지정합니다. 특히 내비게이션 바에 사용할 테마를 제작할 때는 글자의 기준점을 '중간'으로 지정하는 것이 좋습니다.
  • 자간
    글자 간격을 %로 지정합니다.
  • 장평
    글자의 가로 비율과 세로 비율을 %로 지정합니다.
  • 줄 간격
    글자를 입력할 때 줄 바꿈을 하여 여러 줄을 쓸 경우에는 <Ctrl+Enter>키를 누릅니다. 줄 간격은 줄 바꿈한 글자들의 줄 간격을 %로 지정합니다.
적용 단추를 누르면 글자 대화 상자가 열려 있는 상태로 편집 창에 글자가 삽입됩니다. 글자의 형태를 확인하면서 글꼴이나 크기를 편집할 수 있습니다.


글자 패스 대화 상자

[작업 도구 > 글자 패스 [image] 도구 > 패스 개체 선택]

  • 글꼴
    입력한 내용을 표시할 글꼴을 펼침 목록에서 지정합니다.
  • 크기
    글자 크기를 포인트 단위로 직접 입력하거나 증감 단추를 눌러서 지정합니다.
  • 스타일
    • 진하게 : 글자를 두껍게 합니다.
    • 이탤릭 : 글자를 기울입니다.
  • 쓰기 방향
    • 가로 쓰기 : 글자를 가로 방향으로 입력합니다.
    • 세로 쓰기 : 글자를 세로 방향으로 입력합니다.
  • 내용
    편집 창에 삽입할 글자 패스의 내용을 입력합니다.
  • 글자 시작 위치
    글자가 시작될 위치를 %로 지정합니다. 패스의 시작부터 글자를 입력하려면 '0'을 입력합니다.
  • 자간
    글자 간격을 %로 지정합니다.
  • 장평
    글자의 가로 비율과 세로 비율을 %로 지정합니다.
적용 단추를 누르면 글자 패스 대화 상자가 열려 있는 상태로 편집 창에 글자 패스가 삽입됩니다. 글자 패스의 형태를 확인하면서 글꼴이나 크기를 편집할 수 있습니다.


비트맵 파일 가져오기

비트맵 파일(*.bmp,*.gif, *.jpg, *.jpeg, *.png)을 불러와서 다양한 효과를 적용할 수 있습니다. 효과를 적용한 비트맵 파일은 웹캔버스의 고유 파일 형식인 TNG 파일으로 저장하거나 SVG 파일 또는 비트맵 파일로 내보낼 수 있습니다.

  1. 메뉴에서 [파일 > 가져오기]을 선택합니다.
  2. 가져오기 대화 상자에서 불러올 파일 이름과 형식을 지정한 다음, 열기 단추를 누릅니다.
  3. 비트맵 파일이 편집 창에 삽입됩니다.


스마트 버튼 파일 가져오기

나모 웹에디터 4의 스마트 버튼(*.npi) 파일을 가져와서 편집할 수 있습니다. npi 파일은 이전 버전의 스마트 버튼 파일 형식입니다. 웹캔버스의 스마트 버튼은 tng 파일이며 이전 버전의 스마트 버튼 파일을 불러와서 편집하고 저장할 수 있습니다.

  1. 스마트 버튼 파일을 가져올 문서를 엽니다.
  2. 메뉴에서 [파일 > 가져오기]를 선택합니다.
  3. 가져오기 대화 상자에서 스마트 버튼 파일(*.npi)을 지정하고 열기 단추를 누릅니다.
  4. 스마트 버튼 파일이 문서에 삽입되고 파일을 구성하는 각 개체에 대한 정보가 레이어 창의 레이어 탭에 목록으로 표시됩니다.


일러스트레이터 파일 가져오기

일러스트레이터에서 작업한 파일을 웹캔버스로 가져와서 편집할 수 있습니다.

  1. 일러스트레이터 파일을 가져올 문서를 엽니다.
  2. 메뉴에서 [파일 > 가져오기]를 선택합니다.
  3. 가져오기 대화 상자에서 일러스트레이터 파일(*.ai)을 지정하고 열기 단추를 누릅니다.
  4. 일러스트레이터 파일이 문서에 삽입되고 파일을 구성하는 각 개체에 대한 정보가 레이어 창의 레이어 탭에 목록으로 표시됩니다.


개체/레이어/시트

웹캔버스에서 개체는 이미지를 구성하는 최소 단위입니다. 하나의 이미지는 1개 이상의 시트로 구성되며, 하나의 시트는 1개 이상의 레이어로 구성되고, 하나의 레이어는 1개 이상의 개체 또는 그룹으로 구성됩니다. 1개 이상의 개체가 모여 그룹을 형성합니다.

개체

웹캔버스에서 삽입할 수 있는 개체에는 도형, 패스, 글자, 글자 패스, 비트맵 그림 등이 있습니다.

레이어

레이어는 개체와 그룹을 만들기 위해 필요한 공간입니다. 1개의 레이어 안에는 여러 개의 개체가 있을 수 있으며, 각 개체는 종이를 겹쳐 놓듯이 레이어 위에 올려집니다.

시트

시트는 레이어가 만들어지기 위한 공간입니다. 한 장면을 구성하는 여러 레이어들을 관리하기 위한 것으로, 1개의 시트 안에는 여러 개의 레이어가 있을 수 있습니다. 시트는 롤오버 스마트 버튼을 만들 때 버튼셋을 구성하는 각각의 버튼을 저장하기 위해 사용됩니다.

레이어와 시트의 관리

웹캔버스에서는 레이어 창을 이용하여 각각의 레이어와 시트를 관리합니다. 새로운 레이어/시트의 추가하거나 기존 레이어/시트의 삭제할 수 있으며, 겹치기 순서를 조정할 수 있고 각각의 개체를 잠그거나 보이지 않게 할 수도 있습니다.

  • 레이어 탭
  • 시트 탭


개체 선택하기

이미지를 구성하는 벡터 도형, 패스, 글자, 글자 패스, 비트맵 파일 등의 개체를 위치를 이동시키거나 변형하려면, 먼저 개체를 선택해야 합니다. 개체를 선택하는 방법은 다음과 같습니다.

  1. 작업 도구에서 선택 [image] 도구를 선택합니다.
  2. 문서에서 원하는 개체를 선택합니다.
  3. 선택한 개체의 주변에 선택 영역이 표시됩니다.

    4. 예) 패스 개체를 선택했을 때

    예) 글자 개체를 선택했을 때

  4. 개체 선택을 해제하려면 편집 창에서 개체 바깥쪽을 선택합니다.

선택 [image] 도구를 사용하다가 다른 작업 도구를 선택한 경우 <Ctrl>키를 누르면 일시적으로 선택 도구 상태로 바뀝니다.


채우기/테두리 선택하기

개체는 칠 속성은 채우기(내부 영역)와 테두리로 구성되어 있습니다. 개체의 칠 속성을 변경하려면 개체를 먼저 선택하고 채우기 또는 테두리를 선택합니다.

예) 테두리 두께가 4픽셀인 사각형 개체의 채우기와 테두리

채우기/테두리 선택하기

  1. 작업 도구에서 선택 [image] 도구 또는 직접 선택 [image] 도구를 선택합니다.
  2. 문서에서 원하는 개체를 선택합니다.
  3. 변경할 칠 속성을 선택합니다.
    • 작업 도구에서 채우기 또는 테두리 단추를 누릅니다.
    • 속성 창 칠 탭에서 채우기 또는 테두리 단추를 누릅니다.
    • 견본 창에서 채우기에 적용 [image] 또는 테두리에 적용 [image] 단추를 누릅니다.

    예) 채우기가 선택된 상태일 때


복수 개체 선택하기

이미지를 구성하는 개체를 편집하려면, 먼저 개체를 선택해야 합니다. 한 개 이상의 개체를 선택하면 한꺼번에 이동시키거나 변형시킬 수 있습니다.

  1. 작업 도구에서 선택 [image] 도구 또는 직접 선택 [image] 도구를 선택합니다.
  2. 문서에서 원하는 개체를 선택합니다.
    • <Shift>키를 누른 채 계속해서 개체를 선택하면 여러 개의 개체를 선택할 수 있습니다.
    • 편집 창에서 개체 바깥쪽을 마우스로 누른 채 끌면 영역 안에 포함된 모든 개체가 선택됩니다.
    • 메뉴에서 [편집 > 모두 선택하기]를 선택하거나 <Ctrl+A>키를 누르면 모든 개체가 선택됩니다.
    • 메뉴에서 [편집 > 선택 반전하기]를 선택하면 선택 항목을 반전시켜 현재 선택된 개체 이외의 모든 개체들이 선택됩니다.

작업 도구에서 다른 도구를 선택한 상태에서도 <Ctrl>키를 누르면 일시적으로 선택 [image] 도구 또는 직접 선택 [image] 도구 상태로 바뀌어 개체를 선택할 수 있습니다.


그룹 선택하기

여러 개의 개체로 이루어진 그룹을 선택하여 편집할 수 있습니다.

  1. 작업 도구에서 선택 [image] 도구를 선택합니다.
  2. 편집 창에서 그룹으로 만든 개체를 선택합니다.
  3. 그룹에 포함된 개체 전체가 선택됩니다. 이 경우, 변형을 시키면 그룹 전체가 변형됩니다.

필요에 따라 그룹 혹은 마스크의 하위 개체 중 하나만을 선택하여 편집할 수 있으며, 이 경우 레이어 창에서 선택해야 합니다.


레이어 창에서 선택하기

이미지를 구성하는 개체를 편집하려면, 먼저 개체를 선택해야 합니다. 개체는 작업 도구를 이용하여 편집 창에서 선택하거나, 레이어 창의 목록에서 선택할 수 있습니다. 특히 레이어 창을 이용할 경우, 그룹 혹은 마스크의 하위 개체 중 하나만을 선택하여 편집할 수 있습니다.

개체 선택하기

레이어 창의 개체 목록에서 개체를 선택합니다.

  • <Ctrl>키를 누른 채로 개체를 차례로 선택하여 복수의 개체들을 선택할 수 있습니다.
  • 개체를 선택하고 <Shift>키를 누른 채로 다른 개체를 선택하면 그 사이의 목록에 들어있는 개체들이 모두 선택됩니다.
  • 레이어 창의 개체 하나를 선택한 후, <Ctrl+A>키를 누르면 레이어 창의 모든 개체가 선택됩니다.
  • 레이어 창의 개체 하나를 선택한 후, 메뉴에서 [편집 > 선택 반전하기]를 선택하면 선택된 항목 이외의 모든 개체들이 선택됩니다.

그룹 선택하기

  1. 레이어 창의 목록에서 그룹을 선택합니다.
  2. 그룹에 포함된 개체 전체가 선택됩니다. 이 경우, 변형을 시키면 그룹 전체가 변형됩니다.

작업 도구에서 선택 [image] 도구 이외의 도구를 선택한 상태에서 레이어 목록의 개체를 선택했을 경우에는 선택 영역이 표시되지 않습니다.

그룹에 포함된 개체 일부만 선택하기

  1. 레이어 창의 목록에서 그룹에 속한 개체 일부만 선택합니다.
  2. 목록에서 선택한 개체만 편집 창에서 선택됩니다. 이 경우, 선택한 개체만 변형시킬 수 있습니다.

레이어 창의 목록에서 그룹 이름 왼쪽의 [image] / [image] 버튼을 이용하여 그룹에 포함된 개체 목록을 보이게 하거나 감출 수 있습니다.


개체 잠그기

편집을 끝낸 개체는 잠그기 기능을 이용하여 편집할 수 없도록 만들면, 개체를 실수로 편집하는 것을 막을 수 있습니다.

  1. 레이어 탭의 개체 목록에서 잠그고자 하는 개체 왼쪽 사각형 공간을 클릭합니다.
  2. 자물쇠 모양의 아이콘 [image] 이 표시됩니다.
  3. 잠겨진 개체는 편집 창에는 표시되지만 선택하거나 편집할 수 없습니다.
  4. 잠금을 해제하려면 자물쇠 모양의 아이콘 [image] 을 눌러서 표시를 없앱니다.

필요에 따라 레이어 잠그기를 실행할 수도 있습니다. 레이어를 잠그면 레이어에 포함된 모든 개체가 잠금 설정됩니다.


개체 감추기

개체를 감추면 개체의 편집이 불가능해 집니다. 그러나 개체 잠그기와는 달리 감추어진 개체를 이동하거나 편집할 수 있습니다.

  1. 레이어 탭의 개체 목록에서 감추고자 하는 개체 왼쪽의 눈 모양 아이콘 [image] 을 선택합니다.
  2. 눈 모양 아이콘 [image] 이 없어지고, 선택한 개체가 편집 창에 표시되지 않습니다.
  3. 감추기로 설정한 개체는 편집 창에는 표시되지 않지만 선택하거나 편집할 수 있습니다.
  4. 감추기 설정을 해제하려면 눈 모양 아이콘이 있던 사각형을 클릭합니다.

필요에 따라 레이어 감추기를 실행할 수도 있습니다. 레이어를 감추면 레이어에 포함된 모든 개체가 감추기로 설정됩니다.


채우기와 테두리

개체는 채우기와 테두리로 구성되어 있습니다. 개체의 채우기와 테두리는 각각을 색깔, 그라디언트, 패턴 3가지 형태로 칠할 수 있습니다.

예) 사각형 개체의 채우기에 색깔, 그라디언트, 패턴을 적용했을 때

예) 사각형 개체의 테두리에 색깔, 그라디언트, 패턴을 적용했을 때

글자 개체의 경우, 테두리의 기본값이 0픽셀이기 때문에 테두리가 표시되지 않습니다. 그러나 테두리 두께를 1픽셀 이상으로 변경하면 테두리를 편집할 수 있습니다.


칠하기 종류

개체의 채우기와 테두리는 각각을 색깔, 그라디언트, 패턴 3가지 형태로 칠할 수 있습니다.

  • 색깔 적용하기
    개체의 채우기 또는 테두리에 원하는 색깔을 선택하여 적용합니다.
  • 그라디언트 적용하기
    개체의 채우기 또는 테두리에 원하는 그라디언트를 선택하여 적용합니다.
  • 패턴 적용하기
    개체의 채우기 또는 테두리에 원하는 패턴을 선택하여 적용합니다.

    • 예) 여러 가지 칠하기 형태


칠 속성 정하기

개체의 채우기와 테두리를 색깔, 그라디언트, 패턴으로 칠할 수 있습니다.

작업 도구 이용하기

  1. 작업 도구에서 선택 [image] 도구를 누릅니다.
  2. 편집 창에서 원하는 개체를 선택합니다.
  3. 적용 범위를 지정합니다.
    • 채우기 속성을 변경하려면 작업 도구에서 채우기 단추를 누릅니다.
    • 테두리 속성을 변경하려면 작업 도구에서 테두리 단추를 누릅니다.
  4. 채우기 또는 테두리의 펼침 목록 단추를 누르고 색깔/그라디언트/패턴 탭에서 원하는 항목을 선택합니다.
    • 색깔 적용하기
    • 그라디언트 적용하기
    • 패턴 적용하기

채우기/테두리 단추를 더블 클릭하면 이미 적용한 색깔, 그라디언트 속성을 세밀하게 편집할 수 있습니다.

견본 창 이용하기

  1. 작업 도구에서 선택 [image] 도구를 누릅니다.
  2. 편집 창에서 원하는 개체를 선택합니다.
  3. 견본 창에서 적용 범위를 지정합니다.
    • 채우기 속성을 변경하려면 채우기에 적용 [image] 단추를 누릅니다.
    • 테두리 속성을 변경하려면 테두리에 적용 [image] 단추를 누릅니다.
  4. 견본 창의 색깔/그라디언트/패턴 탭에서 원하는 항목을 선택합니다.
    • 색깔 적용하기
    • 그라디언트 적용하기
    • 패턴 적용하기

견본 창이 보이지 않을 경우 메뉴에서 [창 > 견본]을 선택합니다.


칠 속성 바꾸기

개체에 적용된 채우기와 테두리의 칠 속성을 서로 바꿀 수 있습니다.

  1. 작업 도구의 선택 [image] 도구를 눌러 개체를 선택합니다. 개체를 선택하지 않은 상태에서는 앞으로 만들 개체의 채우기 또는 테두리의 칠 속성이 바뀌게 됩니다.
  2. 작업 도구의 채우기와 테두리 바꾸기 [image] 를 누릅니다. 개체의 채우기와 테두리의 칠 속성이 서로 바뀝니다.
    3. 칠 속성 바꾸기 전 | 칠 속성 바꾼 후


칠 속성 없애기

개체에 적용된 채우기와 테두리의 칠 속성을 없앨 수 있습니다. 칠 속성을 없애면 해당 부분이 투명해져서 편집 창의 배경색이 비칩니다.

작업 도구 이용하기

  1. 작업 도구에서 선택 [image] 도구를 선택합니다.
  2. 편집 창에서 칠 속성을 없애려는 개체를 선택합니다.
  3. 채우기 또는 테두리 단추를 눌러 적용 범위를 선택합니다.
  4. 칠 속성 없애기 [image] 를 누릅니다. 채우기 또는 테두리의 칠 속성이 없어지고 투명하게 표시됩니다.

    5. 예) 채우기의 칠 속성을 없앤 경우

    칠 속성을 없애기 전 | 칠 속성 없애기를 한 후

개체를 선택하지 않은 상태에서 칠 속성을 없애면, 이후에 개체를 만들 때 칠 속성이 없는 상태로 만들어집니다.

견본 창 이용하기

  1. 작업 도구에서 선택 [image] 도구를 선택합니다.
  2. 편집 창에서 칠 속성을 없애려는 개체를 선택합니다.
  3. 견본 창에서 채우기에 적용 [image] 또는 테두리에 적용 [image] 단추를 누릅니다.
  4. 견본 창에서 칠 속성 없애기 [image] 를 누릅니다.


칠 속성 초기화

개체의 채우기나 테두리의 칠 속성을 바꾼 뒤에도 원래 지정된 초기값으로 되돌릴 수 있습니다. 채우기의 초기값은 흰색(#FFFFFF), 테두리의 초기값은 검정색(#000000)입니다.

  1. 작업 도구에서 선택 [image] 도구를 선택합니다.
  2. 편집 창에서 칠 속성을 초기화하려는 개체를 선택합니다.
  3. 작업 도구의 칠 속성 초기화 [image] 를 누릅니다. 채우기와 테두리가 각각 초기값인 흰색과 검정색으로 바뀝니다.

개체를 선택하지 않은 상태에서 칠 속성을 초기화하면, 이후에 만드는 개체의 채우기 또는 테두리의 칠 속성이 초기화됩니다.


칠 속성 복사하기

다른 개체의 채우기와 테두리의 칠 속성을 한꺼번에 복사하여 다른 개체에 적용할 수도 있습니다.

  1. 작업 도구에서 칠 속성 복사 [image] 도구를 선택합니다.
  2. 문서에서 칠 속성을 복사할 개체를 선택합니다. 선택한 개체의 채우기와 테두리의 칠 속성이 작업 도구의 채우기, 테두리 단추에 복사됩니다.
  3. 채우기, 테두리 단추에 복사한 속성은 칠 속성 적용하기로 다른 개체에 적용할 수 있습니다.


칠 속성 적용하기

작업 도구의 채우기와 테두리 단추에 지정되어 있는 칠 속성을 개체에 바로 적용할 수 있습니다. 칠 속성 복사하기를 이용하면 개체의 속성을 채우기와 테두리 단추에 복사할 수 있습니다. 여러 개체에 동일한 채우기와 테두리 속성을 적용할 때 편리합니다.

  1. 작업 도구에서 칠 속성 적용 [image] 도구를 선택합니다.
  2. 문서에서 칠 속성을 적용할 개체를 선택합니다. 작업 도구의 채우기 또는 테두리 단추에 지정되어 있던 칠 속성이 개체에 적용됩니다.
  3. 계속해서 칠 속성을 적용할 개체를 선택합니다.


색깔이란?

이미지를 만들고 편집하는 데 있어서 색깔은 가장 중요한 요소입니다. 웹캔버스는 사용자가 자신에게 필요한 색깔을 효율적으로 관리하여 사용할 수 있도록 색깔 라이브러리를 제공합니다. Windows용 색깔 라이브러리뿐만 아니라 Macintosh용 색깔 라이브러리, 회색 음영, 웹 세이프 색깔 라이브러리를 제공하며, 자주 사용하는 색깔을 모아서 자신만의 색깔 라이브러리로 등록할 수 있도록 라이브러리 추가 기능을 지원합니다.

웹 세이프 라이브러리(웹 세이프 색깔.ctb)

웹캔버스에서 모양 라이브러리 파일은 나모 웹에디터 5 파워 플러스가 설치된 폴더 아래 lib\WebCanvas 폴더의 하위 Color 폴더에 .ctb 확장자를 가진 파일로 저장됩니다.

Macintosh.ctb | Windows.ctb | 회색 음영.ctb

색깔 라이브러리에 있는 색깔을 더블 클릭하면 색깔 편집 대화 상자가 나타납니다. 색깔 편집 대화 상자에서는 기존의 색깔을 색깔 스펙트럼을 이용하여 다른 색깔로 편집할 수 있습니다.


색깔 적용하기

개체의 채우기 또는 테두리 색깔을 원하는 대로 선택하여 지정할 수 있습니다.

작업 도구 이용하기

  1. 작업 도구의 선택 [image] 도구를 선택합니다.
  2. 편집 창에서 색깔을 적용할 개체를 선택합니다.
  3. 채우기 또는 테두리 단추의 펼침 목록 단추를 누른 다음, 색깔 탭에서 원하는 색깔을 선택합니다.

채우기 또는 테두리 단추를 더블 클릭하면 색깔 편집 대화 상자에서 원하는 색깔로 편집할 수 있습니다.

견본 창 이용하기

  1. 작업 도구의 선택 [image] 도구를 선택합니다.
  2. 편집 창에서 색깔을 적용할 개체를 선택합니다.
  3. 견본 창에서 채우기에 적용 [image] 또는 테두리에 적용 [image] 단추를 누릅니다.
  4. 색깔 탭에서 원하는 색깔을 선택합니다. 선택한 색깔이 바로 개체에 적용됩니다.


색깔 수정하기

개체에 적용한 색깔을 원하는대로 변경할 수 있습니다. 견본 창 색깔 탭에 있는 색깔이 충분하지 않은 경우 색깔 편집 대화 상자를 이용하여 원하는 색깔을 선택할 수 있습니다.

  1. 작업 도구의 선택 [image] 도구를 선택합니다.
  2. 편집 창에서 색깔을 수정할 개체를 선택합니다.
  3. 채우기 단추 또는 테두리 단추를 더블 클릭합니다.
  4. 색깔 편집 대화 상자에서 다음 중 한 가지 방법을 이용하여 원하는 색깔을 선택합니다.
    • 색깔 스펙트럼 또는 색깔 슬라이드를 이용하여 원하는 색깔을 지정합니다.
    • 색상, 채도, 명도, 빨강, 녹색, 파랑에 직접 숫자를 입력하여 색깔을 지정합니다.
    • 색깔 지정 [image] 을 이용하여 현재 화면에 나타난 색깔 중 원하는 색깔을 눌러 지정합니다.
  5. 확인 단추를 누릅니다. 선택한 개체에 변경된 색깔이 적용됩니다.


색깔 라이브러리 관리하기

라이브러리란 개체를 만들고 편집하는 데 필요한 요소들을 미리 정리하여 놓은 창고를 말합니다. 웹캔버스는 5가지 종류의 라이브러리를 제공합니다. 라이브러리를 이용하면 기존의 라이브러리에서 제공하는 요소들을 편리하게 쓸 수 있을 뿐만 아니라 사용자가 작업한 것을 새 라이브러리로 등록하여 필요할 때마다 사용할 수 있기 때문에 작업을 보다 효율적으로 할 수 있습니다.

색깔 라이브러리란 개체에 적용할 수 있는 색깔을 모아놓은 것입니다. 견본 창의 색깔 탭에서 자주 사용하는 색깔을 추가하거나 필요없는 색을 삭제하여 편집할 수 있습니다.

라이브러리 이용하기

  • 새 라이브러리 만들기
    견본 창의 색깔 탭에서 새로 라이브러리를 추가하여 만들 수 있습니다.
  • 라이브러리 열기
    견본 창의 색깔 탭에서 이미 만들어둔 라이브러리를 선택하여 열 수 있습니다.
  • 다른 라이브러리로 저장하기
    견본 창의 색깔 탭에서 현재 사용 중인 라이브러리를 다른 이름으로 저장할 수 있습니다.
  • 라이브러리에 추가하기
    견본 창의 색깔 탭에서 현재 사용 중인 라이브러리에 다른 라이브러리를 추가할 수 있습니다.
  • 라이브러리 초기화하기
    견본 창의 색깔 탭에서 기본 라이브러리를 편집했을 경우, 원래의 상태로 되돌릴 수 있습니다.


색깔 편집하기

견본 창 색깔 탭에 있는 색깔을 원하는 대로 바꿀 수 있습니다.

  1. 견본 창의 색깔 탭에서 편집할 색깔을 선택합니다.
  2. 하위 메뉴에서 [편집하기]를 선택하거나 바로가기 메뉴에서 [편집하기]를 선택합니다.
  3. 색깔 편집 대화 상자에서 원하는 색깔을 지정한 뒤 확인 단추를 누릅니다.
  4. 선택한 색깔이 변경됩니다.

색깔 탭에서 색깔을 더블 클릭하면 바로 색깔 편집 대화 상자가 나타납니다.


색깔 추가하기

견본 창 색깔 탭의 현재 편집 중인 색깔 라이브러리에 새로운 색깔을 추가할 수 있습니다.

색깔 추가하기

  1. 견본 창의 색깔 탭에서 하위 메뉴의 [추가하기]를 선택합니다.
  2. 색깔 편집 대화 상자에서 원하는 색깔을 지정한 뒤 확인 단추를 누릅니다.
  3. 현재의 색깔 라이브러리에 선택한 색깔이 추가됩니다.

채우기/테두리에서 색깔 추가하기

작업 도구의 채우기 또는 테두리 단추에 지정되어 있는 색깔을 현재 편집 중인 색깔 라이브러리에 추가할 수 있습니다.

  1. 견본 창의 색깔 탭에서 하위 메뉴의 [채우기에서 색깔 추가하기] 또는 [테두리에서 색깔 추가하기]를 선택합니다.
  2. 현재 작업 도구의 채우기 또는 테두리 단추에 지정되어 있는 색깔이 현재 편집 중인 색깔 라이브러리에 추가됩니다.


색깔 삭제하기

사용하지 않는 색깔은 견본 창 색깔 탭에서 삭제할 수 있습니다.

색깔 삭제하기

  1. 견본 창의 색깔 탭에서 삭제할 색깔을 선택합니다.
  2. 하위 메뉴의 [삭제하기]를 선택하거나 바로가기 메뉴의 [삭제하기]를 선택합니다.
  3. 선택한 색깔이 삭제됩니다.


색깔 편집 대화 상자

색깔 사용자 정의

웹 세이프 색깔만 보기

색깔 지정

색깔 미리보기

색깔 사용자 정의

  • 색깔 스펙트럼
    동일한 색상을 빨강, 녹색, 파랑, 색상, 명도 및 채도 값을 달리하여 다양하게 보여줍니다. 색깔 스펙트럼 상자 안쪽을 마우스로 선택하거나 십자 모양의 포인터를 원하는 위치로 끌어 원하는 색깔을 선택합니다. 선택한 색깔은 색깔 미리보기의 새 색깔에 막대로 나타납니다.
  • 색깔 막대
    빨강, 녹색, 파랑 및 색상 값을 달리하여 다양한 색깔을 슬라이드 막대 형태로 보여줍니다. 색깔 막대의 안쪽을 마우스로 선택하거나 오른쪽에 있는 색깔 막대 조절기를 위 아래로 끌어 원하는 색깔을 선택합니다. 조절기를 움직임에 따라 색깔 스펙트럼 상자와 새 색깔에 표시되는 색깔이 바뀌게 됩니다.
  • 색상, 채도, 명도
    선택한 색깔의 색상, 명도, 채도를 0부터 255까지의 숫자로 보여줍니다. 수치를 직접 입력해서 색깔을 지정할 수도 있습니다.
  • 빨강, 녹색, 파랑
    선택한 색깔의 RGB값을 보여줍니다. 수치를 직접 입력해서 색깔을 지정할 수도 있습니다.
  • 빨강, 녹색, 파랑 막대
    빨강, 녹색, 파랑의 RGB 값을 슬라이드 막대 형태로 보여줍니다. 각각의 조절기를 좌우로 끌어 원하는 RGB 값을 선택할 수 있습니다. 슬라이드 막대를 움직임에 따라 색깔 스펙트럼 상자, 색깔 막대, 색상/명도/채도, 새 색깔에 표시되는 색깔이 바뀌게 됩니다.
  • HTML
    색깔 값을 HTML 코드 값인 16진수로 보여줍니다. 색깔의 값을 직접 입력할 수도 있습니다.
  • 이름
    선택한 색깔이 웹 세이프 색깔의 기본 16 색깔에 해당되는 경우, 색깔 이름을 보여줍니다.

웹 세이프 색깔만 보기

색깔 스펙트럼, 색깔 막대, 빨강, 녹색, 파랑 막대에 나타나는 색깔을 웹 세이프 색깔인 216색으로만 한정합니다. 웹 세이프 색깔은 운영체제에 상관없이 넷스케이프와 인터넷 익스플로러에서 동일하게 보여지는 공통된 색깔을 말합니다.

색깔 지정

현재 화면에 나타난 색깔을 선택하여 새 색깔로 지정합니다.

색깔 미리보기

현재 색깔과 새 색깔을 비교하면서 색깔을 선택할 수 있습니다. 색깔 편집 대화 상자의 오른쪽 위에 상자 모양으로 나타납니다.

  • 현재 색깔
    색깔을 바꾸기 전의 기존의 색깔을 보여줍니다. 위쪽의 상자입니다.
  • 새 색깔
    색깔 스펙트럼, 색깔 막대 등에서 선택한 새 색깔을 보여줍니다. 아래쪽의 상자입니다.


그라디언트란?

그라디언트란 개체에 두 개 이상의 색깔과 투명도가 점차적으로 변하는 칠하기 형태의 하나입니다. 그라디언트 라이브러리를 이용하면 현재 라이브러리에서 선택한 그라디언트를 개체의 채우기나 테두리에 적용할 수 있습니다. 그라디언트 라이브러리는 견본 창의 그라디언트 탭으로 제공됩니다. 자주 사용하는 그라디언트 형태를 편집하여 라이브러리에 등록하거나 새로 추가할 수 있습니다.

예) 그라디언트를 이용한 개체 칠하기

웹캔버스에서 그라디언트 라이브러리 파일은 나모 웹에디터 5 파워 플러스가 설치된 폴더 아래 lib\WebCanvas 폴더의 하위 Gradient 폴더에 .grb 확장자를 가진 파일로 저장됩니다.

기본 라이브러리(기본 라이브러리.grb)


그라디언트 적용하기

개체의 채우기 또는 테두리에 원하는 그라디언트를 선택하여 적용할 수 있습니다.

작업 도구 이용하기

  1. 작업 도구의 선택 [image] 도구를 눌러 그라디언트를 적용할 개체를 선택합니다.
  2. 채우기 또는 테두리 단추의 펼침 목록 단추를 누른 다음, 그라디언트 탭에서 원하는 그라디언트를 선택합니다.

견본 창 이용하기

  1. 작업 도구의 선택 [image] 도구를 눌러 개체를 선택합니다.
  2. 견본 창을 선택한 뒤 채우기에 적용 [image] 또는 테두리에 적용 [image] 단추를 누릅니다.
  3. 그라디언트 탭에서 원하는 그라디언트를 선택합니다. 선택한 그라디언트가 바로 개체에 적용됩니다.

    4. 예) 채우기에 그라디언트를 적용한 경우

    적용 전 | 적용 후


그라디언트 수정하기

개체에 지정되어 있는 그라디언트의 모양과 방향을 원하는 대로 편집할 수 있습니다.

그라디언트 모양 수정하기

  1. 작업 도구에서 선택 [image] 도구를 선택합니다.
  2. 그라디언트가 적용된 개체를 선택합니다.
  3. 채우기 단추를 더블 클릭합니다. 테두리에 그라디언트가 적용되었을 경우 테두리 단추를 더블 클릭합니다.
  4. 그라디언트 편집 대화 상자에서 이름, 종류, 방법, 색깔, 투명도를 변경합니다.
  5. 확인 단추를 누릅니다. 선택한 개체에 변경된 그라디언트가 적용됩니다.

그라디언트 방향 수정하기

  1. 작업 도구에서 선택 [image] 도구를 선택합니다.
  2. 그라디언트가 적용되어 있는 개체를 선택합니다.
  3. 작업 도구에서 그라디언트 벡터 설정 [image] 도구를 누릅니다.
  4. 개체에서 그라디언트 시작점이 될 부분을 마우스로 누른 채 그라디언트 끝점 방향으로 끌어서 조정합니다.
  5. 새로 지정한 그라디언트 방향이 개체에 적용됩니다.


그라디언트 라이브러리 관리하기

라이브러리란 개체를 만들고 편집하는 데 필요한 요소들을 미리 정리하여 놓은 창고를 말합니다. 웹캔버스는 5가지 종류의 라이브러리를 제공합니다. 라이브러리를 이용하면 기존의 라이브러리에서 제공하는 요소들을 편리하게 쓸 수 있을 뿐만 아니라 사용자가 작업한 것을 새 라이브러리로 등록하여 필요할 때마다 사용할 수 있기 때문에 작업을 보다 효율적으로 할 수 있습니다.

그라디언트 라이브러리란 개체에 적용할 수 있는 그라이언트 형태를 모아놓은 것으로 견본 창의 그라디언트 탭에서 제공됩니다.

라이브러리 이용하기

  • 새 라이브러리 만들기
    견본 창의 그라디언트 탭에서 새로 라이브러리를 추가하여 만들 수 있습니다.
  • 라이브러리 열기
    견본 창의 그라디언트 탭에서 이미 만들어둔 라이브러리를 선택하여 열 수 있습니다.
  • 다른 라이브러리로 저장하기
    견본 창의 그라디언트 탭에서 현재 사용 중인 라이브러리를 다른 이름으로 저장할 수 있습니다.
  • 라이브러리에 추가하기
    견본 창의 그라디언트 탭에서 현재 사용 중인 라이브러리에 다른 라이브러리를 추가할 수 있습니다.
  • 라이브러리 초기화하기
    견본 창의 그라디언트 탭에서 기본 라이브러리를 편집한 뒤 원래의 상태로 되돌릴 수 있습니다. 사용자가 편집하여 저장한 라이브러리는 되돌릴 수 없습니다.


그라디언트 편집하기

견본 창 그라디언트 탭의 그라디언트를 원하는 대로 바꿀 수 있습니다.

  1. 견본 창의 그라디언트 탭에서 편집할 그라디언트를 선택합니다.
  2. 하위 메뉴의 [편집하기]를 선택하거나 바로가기 메뉴의 [편집하기]를 선택합니다.
  3. 그라디언트 편집 대화 상자에서 그라디언트를 편집한 뒤 확인 단추를 누릅니다.
  4. 선택한 그라디언트가 변경됩니다.

그라디언트 탭에서 그라디언트를 더블 클릭하면 바로 그라디언트 편집 대화 상자에서 그라디언트를 편집할 수 있습니다.

작업 도구에서 그라디언트 벡터 설정 [image] 도구를 더블 클릭하면 그라디언트의 방향이 초기값으로 설정됩니다.


그라디언트 추가하기

사용자가 편집한 그라디언트를 견본 창 그라디언트 탭의 라이브러리에 추가할 수 있습니다.

그라디언트 추가하기

  1. 견본 창의 그라디언트 탭에서 하위 메뉴의 [추가하기]를 선택합니다.
  2. 그라디언트 편집 대화 상자에서 속성을 지정한 뒤 확인 단추를 누릅니다.
  3. 새로운 그라디언트가 라이브러리에 추가됩니다.

그라디언트가 적용된 개체를 편집 창에서 마우스로 끌어 라이브러리에 놓는 방법으로도 그라디언트를 추가할 수 있습니다.


그라디언트 삭제하기

사용하지 않는 그라디언트를 견본 창 그라디언트 탭에서 삭제할 수 있습니다.

그라디언트 삭제하기

  1. 견본 창의 그라디언트 탭에서 삭제할 그라디언트를 선택합니다.
  2. 하위 메뉴의 [삭제하기]를 선택하거나 바로가기 메뉴의 [삭제하기]를 선택합니다.
  3. 선택한 그라디언트가 라이브러리에서 삭제됩니다.


그라디언트 편집 대화 상자

[견본 창 - 그라디언트 탭 하위 메뉴 > 편집하기], [그라디언트 탭 미리보기 더블 클릭]

일반

  • 이름
    그라디언트 효과의 이름을 지정합니다.
  • 종류

    선형(Linear)

    직선으로 된 그라디언트입니다. 그라디언트 진행 방향에 따라 직선으로 색깔과 투명도가 변합니다.

    원형(Radial)

    원형으로 된 그라디언트입니다. 그라디언트 진행 방향에 따라 원형으로 색깔과 투명도가 변합니다.

  • 방법

    일반(Padding)

    기본적인 모양으로 한번의 그라디언트 효과만을 줍니다. 시작점과 끝점을 벗어나는 영역은 시작점과 끝점의 색깔을 따릅니다.

    반복(Repeat)

    시작점과 끝점이 개체보다 짧을 경우 반복적인 그라디언트 효과를 줍니다. 시작점과 끝점을 벗어나는 영역에도 반복적으로 적용됩니다.

    반전(Reflect)

    시작점과 끝점이 개체보다 짧을 경우 시작점과 끝점의 위치를 바꾼 상태로 반복적인 그라디언트 효과를 줍니다. 시작점과 끝점을 벗어나는 영역에도 반복적으로 적용됩니다.

색깔

  • 위치
    선택한 그라디언트 막대의 색깔이 적용될 위치를 조절합니다. 0%는 그라디언트의 시작점을, 100%는 그라디언트의 끝점을 의미합니다.
  • 색깔
     색깔 편집 대화 상자에서 그라디언트 색깔을 지정합니다.
  • 그라디언트 막대
    그라디언트의 색상이 변해 가는 정도를 슬라이드 막대 형태로 나타냅니다. 그라디언트 막대 밑에 있는 색깔 조절 단추를 끌어서 위치를 마음대로 바꿀 수 있습니다. 색깔 조절 단추를 선택한 뒤 색깔 편집 대화 상자에서 원하는 색깔을 선택하고 확인 단추를 누르면 선택한 색깔이 색깔 조절 단추에 지정됩니다. 그라디언트 막대의 아래 부분을 마우스로 누르면 색깔 조절 단추가 추가로 생깁니다. 색깔 조절 단추를 삭제하려면 삭제하려는 색깔 조절 단추를 누른 채 그라디언트 막대의 바깥쪽으로 끌어냅니다.

투명도

  • 위치
    선택한 투명도 막대의 투명도가 적용될 위치를 조절합니다. 0%는 그라디언트의 시작을, 100%는 그라디언트의 끝을 의미합니다.
  • 불투명도
    그라디언트 효과의 불투명한 정도를 지정합니다.
  • 투명도 막대
    그라디언트의 투명도가 변해 가는 정도를 슬라이드 막대 형태로 나타냅니다. 투명도 막대 밑에 있는 투명도 조절 단추를 끌어서 위치를 마음대로 바꿀 수 있습니다. 투명도 조절 단추를 선택하여 불투명도를 변경할 수도 있습니다. 또한 투명도 막대의 아래 부분을 마우스로 누르면 투명도 조절 단추가 추가로 생깁니다. 투명도 조절 단추를 삭제하려면 삭제하려는 투명도 조절 단추를 누른 채 투명도 막대의 바깥쪽으로 끌어냅니다.


패턴이란?

패턴이란 개체에 적용할 수 있는 3가지 칠하기 형태(색깔, 그라디언트, 패턴)의 하나로서, 비트맵 이미지로 구성된 것을 말합니다. 패턴을 이용하면 마치 개체에 무늬를 입히듯이 개체를 꾸밀 수 있습니다. 패턴 라이브러리에서 원하는 것을 선택하여 개체에 적용할 수 있으며, 새로운 패턴을 추가하거나 불필요한 패턴을 삭제할 수 있습니다. 패턴은 비트맵 이미지가 등록된 것이기 때문에 색깔이나 그라디언트와는 달리 대화 상자를 이용해서 편집할 수 없습니다.

예) 패턴을 이용한 개체 칠하기

패턴은 견본 창의 패턴 탭에서 라이브러리 형태로 관리됩니다. 웹캔버스에서는 패턴의 종류에 따라 기본 라이브러리와 회색 패턴 라이브러리를 제공합니다.

기본 라이브러리(기본 라이브러리.shp)

웹캔버스에서 패턴 라이브러리 파일은 나모 웹에디터 5 파워 플러스가 설치된 폴더 아래 lib\WebCanvas 폴더의 하위 Pattern 폴더에 .ptn 확장자를 가진 파일로 저장됩니다.

회색 패턴 라이브러리.ptn


패턴 적용하기

개체의 채우기 또는 테두리에 원하는 패턴을 선택하여 적용합니다.

작업 도구 이용하기

  1. 작업 도구의 선택 [image] 도구를 선택합니다.
  2. 편집 창에서 패턴을 적용할 개체를 선택합니다.
  3. 채우기 또는 테두리 단추의 펼침 목록 단추를 누른 다음, 패턴 탭에서 원하는 패턴을 선택합니다.

견본 창이 보이지 않을 경우 메뉴에서 [창 > 견본]을 선택합니다.

견본 창 이용하기

  1. 작업 도구의 선택 [image] 도구를 선택합니다.
  2. 편집 창에서 패턴을 적용할 개체를 선택합니다.
  3. 견본 창을 선택한 뒤 채우기에 적용 [image] 또는 테두리에 적용 [image] 단추를 누릅니다.
  4. 패턴 탭에서 원하는 패턴을 선택합니다.

    5. 예) 채우기에 패턴을 적용한 경우

    적용 전 | 적용 후


패턴 라이브러리 관리하기

라이브러리란 개체를 만들고 편집하는 데 필요한 요소들을 미리 정리하여 놓은 창고를 말합니다. 웹캔버스는 5가지 종류의 라이브러리를 제공합니다. 라이브러리를 이용하면 기존의 라이브러리에서 제공하는 요소들을 편리하게 쓸 수 있을 뿐만 아니라 사용자가 작업한 것을 새 라이브러리로 등록하여 필요할 때마다 사용할 수 있기 때문에 작업을 보다 효율적으로 할 수 있습니다.

패턴 라이브러리란 개체에 적용할 수 있는 여러 가지 무늬인 패턴을 모아놓은 것으로 견본 창의 패턴 탭에서 제공됩니다.

라이브러리 이용하기

  • 새 라이브러리 만들기
    새 패턴 라이브러리를 추가하여 만들 수 있습니다.
  • 라이브러리 열기
    이미 만들어둔 패턴 라이브러리를 선택하여 열 수 있습니다.
  • 다른 라이브러리로 저장하기
    현재 사용 중인 패턴 라이브러리를 다른 이름으로 저장할 수 있습니다.
  • 라이브러리에 추가하기
    현재 사용 중인 패턴 라이브러리에 다른 라이브러리를 추가할 수 있습니다.
  • 라이브러리 초기화하기
    기본 패턴 라이브러리를 편집했을 경우, 원래의 상태로 되돌릴 수 있습니다.


패턴 추가하기

사용자가 편집한 패턴을 견본 창의 패턴 탭 라이브러리에 추가할 수 있습니다.

패턴 추가하기

  1. 견본 창의 패턴 탭에서 하위 메뉴의 [추가하기]를 선택합니다.
  2. 열기 대화 상자에서 원하는 이미지 파일을 선택한 뒤 열기 단추를 누릅니다.
  3. 지정한 이미지가 새 패턴으로 라이브러리에 추가됩니다.


패턴 삭제하기

사용하지 않는 패턴을 견본 창의 패턴 탭에서 삭제할 수 있습니다.

패턴 삭제하기

  1. 견본 창의 패턴 탭에서 지울 패턴을 선택합니다.
  2. 하위 메뉴의 [삭제하기]를 선택하거나 바로가기 메뉴의 [삭제하기]를 선택합니다.
  3. 선택한 패턴이 라이브러리에서 삭제됩니다.


스타일이란?

스타일이란 채우기, 테두리, 효과, 글꼴 등의 다양한 속성을 하나의 묶어서, 한꺼번에 적용할 수 있도록 만들어 놓을 것을 말합니다. 스타일 라이브러리에서 원하는 것을 선택하여 손쉽게 편집 중인 개체에 적용할 수 있습니다. 스타일을 라이브러리에 있는 항목을 편집하여, 하나의 스타일을 구성하는 여러 가지 속성 중에서 원하는 것만 선택하거나 해제할 수도 있으며 사용자가 직접 편집한 결과를 스타일로 등록할 수도 있습니다.

예) 스타일을 적용한 개체

웹캔버스에서 스타일 라이브러리 파일은 나모 웹에디터 5 파워 플러스가 설치된 폴더 아래 lib\WebCanvas 폴더의 하위 Style 폴더에 .sty 확장자를 가진 파일로 저장됩니다.

기본 라이브러리(기본 라이브러리.sty)


스타일 적용하기

채우기, 테두리, 효과, 글꼴 같은 다양한 속성을 하나의 스타일로 개체에 적용할 수 있습니다.

개체에 스타일 적용

  1. 작업 도구의 선택 [image] 도구를 선택합니다.
  2. 스타일을 적용할 개체를 선택합니다.
  3. 라이브러리 창의 스타일 탭을 엽니다.
  4. 원하는 스타일을 선택합니다.


스타일 라이브러리 관리하기

라이브러리란 개체를 만들고 편집하는 데 필요한 요소들을 미리 정리하여 놓은 창고를 말합니다. 웹캔버스는 5가지 종류의 라이브러리를 제공합니다. 라이브러리를 이용하면 기존의 라이브러리에서 제공하는 요소들을 편리하게 쓸 수 있을 뿐만 아니라 사용자가 작업한 것을 새 라이브러리로 등록하여 필요할 때마다 사용할 수 있기 때문에 작업을 보다 효율적으로 할 수 있습니다.

스타일 라이브러리란 개체에 적용할 수 있는 속성들을 한 데 모아둔 것을 말하며 라이브러리 창의 스타일 탭에서 제공됩니다.

라이브러리 이용하기

  • 새 라이브러리 만들기
    새 스타일 라이브러리를 추가하여 만들 수 있습니다.
  • 라이브러리 열기
    이미 만들어둔 스타일 라이브러리를 선택하여 열 수 있습니다.
  • 다른 라이브러리로 저장하기
    현재 사용 중인 스타일 라이브러리를 다른 이름으로 저장할 수 있습니다.


스타일 편집하기

라이브러리 창 스타일 탭에 등록된 스타일의 속성을 편집할 수 있습니다.

  1. 라이브러리 창의 스타일 탭에서 편집할 스타일을 선택합니다.
  2. 하위 메뉴 또는 바로가기 메뉴에서 [편집하기]를 누릅니다.
  3. 스타일 편집 대화 상자에서 개체에 적용할 속성을 선택한 뒤 확인 단추를 누릅니다.
  4. 선택한 스타일이 편집된 상태로 목록에 표시됩니다.

스타일 탭에서 스타일 미리보기를 더블 클릭하면 스타일 편집 대화 상자에서 바로 편집할 수 있습니다.


스타일 추가하기

현재 현집 중인 개체의 속성을 스타일 라이브러리에 스타일로 등록할 수 있습니다.

  1. 작업 도구에서 선택 [image] 도구를 선택합니다.
  2. 스타일로 추가할 개체를 편집 창에서 선택합니다.
  3. 라이브러리 창 스타일 탭의 하위 메뉴에서 [추가하기]를 선택하거나 스타일 추가하기 [image] 단추를 누릅니다.
  4. 선택한 개체의 속성이 스타일 목록의 마지막에 추가됩니다.

편집 창에서 개체를 마우스로 누른 채 스타일 목록으로 끌어다 놓는 방법으로 스타일을 추가할 수도 있습니다.


스타일 삭제하기

불필요한 스타일을 라이브러리 창 스타일 탭에서 삭제할 수 있습니다.

스타일 삭제하기

  1. 라이브러리 창 스타일 탭에서 삭제할 스타일을 선택합니다.
  2. 하위 메뉴에서 [삭제하기]를 선택하거나 스타일 삭제하기 [image] 단추를 누릅니다.
  3. 스타일 목록에서 선택한 스타일이 삭제됩니다.


스타일 편집 대화 상자

[라이브러리 창 - 스타일 탭 하위 메뉴 > 편집하기], [스타일 탭 미리보기 더블 클릭]

  • 채우기 칠
    채우기의 칠하기 속성을 적용합니다. 색깔/그라디언트/패턴 탭에서 선택할 수 있습니다.
  • 테두리 칠
    테두리의 칠하기 속성을 적용합니다. 채우기와 마찬가지로 색깔/그라디언트/패턴 탭에서 선택할 수 있습니다.
  • 테두리 모양
    테두리의 모양 속성을 적용합니다. 속성 창의 칠 탭과 테두리 탭에서 지정할 수 있습니다.
  • 모든 속성
    설정할 수 있는 모든 속성을 한번에 적용합니다.
  • 글꼴
    글꼴을 적용합니다.
  • 글자 크기
    글자 크기를 적용합니다.
  • 글자 모양
    굵게, 이탤릭 등의 글자 속성을 적용합니다.
  • 효과
    효과 속성을 적용합니다. 속성 창의 효과 탭에 선택 표시된 모든 효과를 적용합니다.


개체 복사하기

편집 창에 삽입된 개체를 복사하여 붙여 넣을 수 있습니다.

  1. 작업 도구에서 선택 [image] 도구를 선택합니다.
  2. 편집 창에서 복사할 개체를 선택합니다.
  3. 개체를 복사하기 위해 다음 중 한 가지 방법을 이용합니다.
    • <Alt>키를 누른 채 복사하려는 개체를 마우스로 끌어서 옮깁니다.

    • 메뉴에서 [편집 > 복사하기]를 선택합니다.
    • 기본 도구 막대에서 복사하기 [image] 를 누릅니다.
    • 단축키 <Ctrl+C>를 누릅니다.
  4. 선택한 개체가 클립보드에 복사됩니다.

칠 속성 복사 [image] 도구와 칠 속성 적용 [image] 도구를 이용하면 개체의 칠 속성을 복사하여 적용할 수 있습니다.


개체 자르기

편집 창에 삽입된 개체를 잘라서 붙여 넣을 수 있습니다.

  1. 작업 도구에서 선택 [image] 도구를 선택합니다.
  2. 편집 창에서 자를 개체를 선택합니다.
  3. 다음 중 한 가지를 선택합니다.
    • 메뉴에서 [편집 > 자르기]를 선택합니다.
    • 단축키 <Ctrl+X>를 누릅니다.
  4. 선택한 개체가 잘려서 클립보드로 옮겨집니다.


개체 붙이기

편집 창에 삽입된 개체를 복사하거나 잘라서 붙여 넣을 수 있습니다.

  1. 복사하거나 잘라서 클립보드에 저장한 개체를 편집 창에 붙여 넣습니다.
  2. 다음 중 한 가지를 선택합니다.
    • 메뉴에서 [편집 > 붙이기]를 선택합니다.
    • 기본 도구 막대에서 붙이기 [image] 를 누릅니다.
    • 단축키 <Ctrl+V>를 누릅니다.

칠 속성 복사 [image] , 칠 속성 적용 [image] 도구를 이용하면 개체의 칠 속성을 복사하여 적용할 수 있습니다.


속성 복사하기

개체에 적용한 속성을 여러 가지 방법으로 복사하여 다른 개체에 적용할 수 있습니다.

칠 속성 복사하기

작업 도구의 칠 속성 복사 [image] 도구를 사용하면 개체로부터 원하는 속성을 복사할 수 있습니다.

  • 칠 속성 복사하기
  • 칠 속성 적용하기

스타일을 이용한 속성 복사하기

칠 속성 복사 [image] 도구는 개체의 채우기, 테두리에 적용된 칠 속성만 복사할 수 있습니다. 개체에 적용한 효과, 테두리 두께까지 복사하려면 스타일을 이용합니다.

  1. 작업 도구에서 선택 [image] 도구를 선택합니다.
  2. 복사하려는 속성을 가진 개체를 편집 창에서 누른 채 끌어 라이브러리 창 스타일 탭의 목록으로 옮겨서 스타일로 추가합니다.
  3. 속성을 적용하려는 개체를 편집 창에서 선택합니다.
  4. 라이브러리 창 스타일 탭의 목록에서, 2번에서 추가한 스타일을 선택하여 적용합니다.
스타일 탭에서 스타일 미리보기를 더블 클릭하면 스타일 편집 대화 상자에서 스타일을 편집하여 일부 속성만 적용하도록 할 수도 있습니다.


속성 적용하기

개체에 적용한 속성을 여러 가지 방법으로 복사하여 다른 개체에 적용할 수 있습니다.

칠 속성 적용하기

작업 도구의 칠 속성 복사 [image] 도구로 복사한 속성을 칠 속성 적용 [image] 도구로 다른 개체에 적용할 수 있습니다.

  • 칠 속성 복사하기
  • 칠 속성 적용하기

스타일을 이용한 속성 적용하기

칠 속성 적용 [image] 도구는 개체의 채우기, 테두리에 적용된 칠 속성만 적용할 수 있습니다. 개체에 적용한 효과, 테두리 두께까지 복사하려면 스타일을 이용합니다.


모양대로 자르기

작업 도구의 패스 자르기 도구를 이용하여 패스로 이루어진 개체를 모양대로 잘라 편집할 수 있습니다.

  1. 작업 도구에서 직접 선택 [image] 도구를 선택합니다.
  2. 편집 창에서 패스 개체를 선택합니다. 패스 개체의 조절점이 나타납니다.
  3. 작업 도구에서 패스 자르기 [image] 도구를 누릅니다. 마우스의 모양이 십자가 모양 ( [image])으로 바뀝니다.
  4. 패스 개체에서 자르려는 부분을 클릭합니다.

패스 개체가 아닌 경우, 패스 자르기 도구를 사용할 수 없습니다. 원, 사각형과 같은 도형을 자르기 위해서는 먼저 패스로 변환해야 합니다.


개체 이동하기

편집 창에 삽입한 개체의 위치를 이동시킬 수 있습니다. 개체를 이동할 때는 상황선 오른쪽에 표시되는 개체의 좌표를 참고하면 편리합니다.

  1. 작업 도구에서 선택 [image] 도구 또는 직접 선택 [image] 도구를 선택합니다.
  2. 편집 창에서 이동할 개체를 선택합니다.
  3. 다음 중 한 가지 방법을 이용합니다.
    • 개체를 마우스로 누른 채 끌어 편집 창의 원하는 위치로 이동합니다.
    • 메뉴에서 [수정 > 변형 > 이동]을 선택한 뒤 이동 대화 상자에서 이동 거리 X와 이동 거리 Y 값을 지정합니다.
    • 개체를 선택한 뒤 키보드의 방향키를 누르면 상하좌우로 1픽셀씩 이동합니다. <Shift>키를 누른 채 키보드의 방향키를 누르면 상하좌우로 10픽셀씩 이동합니다.
    • 속성 창의 변형 탭에서 X와 Y를 변경합니다.


그룹 이동하기

편집 창에 삽입하여 만든 그룹 개체의 위치를 이동시킬 수 있습니다. 개체를 이동할 때는 상황선 오른쪽에 표시되는 개체의 좌표를 참고하면 편리합니다.

  1. 작업 도구에서 선택 [image] 도구를 선택합니다.
  2. 편집 창에서 이동할 그룹을 선택합니다.
  3. 다음 중 한 가지 방법을 이용합니다.
    • 그룹을 마우스로 누른 채 끌어 편집 창의 원하는 위치로 이동합니다.
    • 메뉴에서 [수정 > 변형 > 이동]을 선택한 뒤 이동 대화 상자에서 이동 거리 X와 이동 거리 Y를 지정합니다.
    • 그룹을 선택한 뒤 키보드의 방향키를 누르면 상하좌우로 1픽셀씩 이동합니다. <Shift>키를 누른 채 키보드의 방향키를 누르면 상하좌우로 10픽셀씩 이동합니다.
    • 속성 창의 변형 탭에서 X 와 Y를 변경합니다.


화면 이동하기

편집하려는 개체가 있는 화면을 편집 창의 원하는 위치로 옮겨서 쉽게 작업할 수 있습니다.

  1. 작업 도구에서 화면 이동 [image] 도구를 선택합니다. 마우스의 모양이 손 모양 ( [image])으로 나타납니다.
  2. 마우스를 누른 채 끌어서 문서를 원하는 위치로 이동합니다.

화면 이동 [image] 도구를 더블 클릭하면 문서가 자동으로 편집 창 중앙에 정렬됩니다. 다른 작업 도구를 사용하다가 스페이스 바를 누르면 일시적으로 화면 이동 도구로 전환됩니다.


크기 바꾸기

편집 창에 삽입한 개체의 크기를 자유롭게 변경할 수 있습니다.

  1. 작업 도구에서 선택 [image] 도구를 선택합니다.
  2. 크기를 변경할 개체를 편집 창에서 선택합니다.
  3. 다음 중 한 가지 방법을 이용합니다.
    • 작업 도구에서 크기 조절 [image] 도구를 선택한 다음, 마우스 포인터 모양이 [image] 와 같이 변하면 개체를 마우스로 누른 채 끌어서 크기를 조절합니다.
    • 개체의 선택 영역 조절점을 누른 채 끌어서 크기를 변경할 수도 있습니다.
    • 메뉴에서 [수정 > 변형 > 크기 조절]를 선택한 다음, 크기 조절 대화 상자에서 원하는 크기로 지정합니다.
    • 속성 창의 변형 탭에서 W(너비)와 H(높이)를 변경합니다. 비율로 지정하려면 변형에서 [image] (너비 변경), [image] (높이 변경)값을 변경합니다.
도구 옵션을 이용하면 개체의 크기를 바꿀 때 테두리 두께, 그라디언트, 패턴도 변형시킬 것인지 선택할 수 있습니다.


기본 선택 영역과 변형 선택 영역

선택 영역이란 개체를 선택했을 때 나타나는 파란색 사각형을 말합니다. 선택 영역에는 기본 선택 영역과 변형 선택 영역이 있습니다. 작업 도구에서 선택 [image] 도구를 선택했을 때 표시되는 도구 옵션에서 지정할 수 있습니다.

기본 선택 영역과 변형 선택 영역

  • 기본 선택 영역 [image] : 개체를 선택했을 때 기본값으로 표시되는 선택 영역입니다.
  • 변형 선택 영역 [image] : 개체를 변형시켰을 때 개체에 맞게 최소화시켜 표시하는 선택 영역입니다.

선택 영역 바꾸기

  1. 작업 도구에서 선택 [image] 도구를 선택합니다.
  2. 회전, 기울이기, 크기 조절 등으로 변형시킨 개체를 문서에서 선택합니다.
  3. 선택 영역이 기본값인 기본 선택 영역으로 표시됩니다.
  4. 도구 옵션에서 변형 선택 영역 [image] 을 누릅니다. 선택 영역이 개체에 맞게 최소화됩니다.

선택 영역과 개체 변형

선택 영역의 네 꼭지점과 네 변의 중간 지점에 표시되는 조절점을 마우스로 누른 채 끌면 개체의 크기를 변경시킬 수 있습니다. 선택 영역의 종류에 따라 아래와 같이 서로 다른 방법으로 개체의 크기 변경이 가능합니다.

예) 기본 선택 영역의 경우

예) 변형 선택 영역의 경우

개체를 변형시키지 않았을 경우에는 기본 선택 영역과 변형 선택 영역이 같습니다.


기울이기

편집 창에 삽입한 개체를 원하는 방향으로 자유롭게 기울일 수 있습니다.

  1. 작업 도구에서 선택 [image] 도구를 선택합니다.
  2. 기울일 개체를 편집 창에서 선택합니다.
  3. 다음 중 한 가지 방법을 이용합니다.
    • 작업 도구에서 기울이기 [image] 도구를 누른 다음, 마우스 포인터 모양이 [image] 와 같이 변하면, 중심점 [image] 주변을 마우스로 누른 채 끌어서 원하는 방향으로 기울입니다.
    • 메뉴에서 [수정 > 변형 > 회전/기울이기]를 선택한 다음, 회전/기울이기 대화 상자에서 원하는 방향과 각도를 지정합니다.
    • 속성 창의 변형 탭에서 기울이기 방향과 각도를 지정합니다. 개체를 X축으로 기울이려면 [image], Y축으로 기울이려면 [image] 값을 변경합니다.


회전시키기

편집 창에 삽입한 개체를 자유자재로 회전시킬 수 있습니다.

직접 회전시키기

  1. 작업 도구에서 선택 [image] 도구를 선택합니다.
  2. 회전시킬 개체를 편집 창에서 선택합니다.
  3. 다음 중 한 가지 방법을 이용합니다.
    • 작업 도구에서 회전 [image] 도구를 선택한 다음, 중심점 [image] 주변을 마우스로 누른 채 끌어 원하는 각도로 회전시킵니다. <Shift>키를 누른 채 마우스를 움직이면 45도 간격으로 개체를 회전시킬 수 있습니다.
    • 메뉴에서 [수정 > 변형 > 회전/기울이기]를 선택한 다음, 회전/기울이기 대화 상자에서 원하는 방향과 각도를 지정합니다.
    • 속성 창의 변형 탭에서 [image] (회전) 각도를 지정합니다. 지정한 각도만큼 시계 방향으로 회전합니다.

정해진 각도로 회전시키기

  1. 작업 도구의 선택 [image] 도구를 선택합니다.
  2. 회전시킬 개체를 편집 창에서 선택합니다.
  3. 메뉴에서 [수정 > 변형]을 선택하여 원하는 각도를 지정합니다.
    • 90도로 회전시키려면 [90도 회전]이나 단축키 <Ctrl+9>를 누릅니다.
    • 180도로 회전시키려면 [180도 회전]이나 단축키 <Ctrl+8>를 누릅니다.
    • 270도로 회전시키려면 [270도 회전]이나 단축키 <Ctrl+7>를 누릅니다.


좌우 뒤집기

개체를 좌우로 뒤집어서 변형시킬 수 있습니다.
  1. 작업 도구에서 선택 [image] 도구를 선택합니다.
  2. 좌우로 뒤집으려는 개체를 편집 창에서 선택합니다.
  3. 다음 중 한 가지 방법을 이용합니다.
    • 메뉴에서 [수정 > 변형 > 좌우 뒤집기]를 선택합니다.
    • 단축키 <Ctrl+Alt+H>를 누릅니다.
    • 작업 도구에서 뒤집기 [image] 도구를 선택한 다음, 중심점 [image] 주변을 마우스로 누른 채 끌어 개체의 좌우가 뒤집히도록 합니다.
  4. 선택한 개체가 좌우로 뒤집힙니다.


상하 뒤집기

개체를 상하로 뒤집어서 변형시킬 수 있습니다.
  1. 작업 도구에서 선택 [image] 도구를 선택합니다.
  2. 상하로 뒤집으려는 개체를 편집 창에서 선택합니다.
  3. 다음 중 한 가지 방법을 이용합니다.
    • 메뉴에서 [수정 > 변형 > 상하 뒤집기]를 선택합니다.
    • 단축키 <Ctrl+Alt+V>를 누릅니다.
    • 작업 도구에서 뒤집기 [image] 도구를 선택한 다음, 중심점 [image] 주변을 마우스로 누른 채 끌어 개체의 상하가 뒤집히도록 합니다.
  4. 선택한 개체가 상하로 뒤집힙니다.


패스 변형값 초기화

패스 개체를 회전/기울이기 혹은 크기 조절 등으로 변형시키면 패스 개체의 선택 영역과 좌표값이 변경됩니다. 패스 변형값 초기화를 이용하면 변경된 좌표값을 초기화할 수 있습니다.

  1. 작업 도구에서 선택 [image] 도구를 선택합니다.
  2. 변형시킨 패스 개체를 편집 창에서 선택합니다.
  3. 메뉴에서 [수정 > 변형 > 패스 변형값 초기화]를 선택합니다. 변형된 패스의 좌표값이 초기화되어 속성 창 변형 탭의 변형 정보가 기본값으로 바뀝니다.


모양 수정하기

패스로 이루어진 개체는 조절점 위치를 옮겨서 모양을 수정할 수 있습니다.

  1. 작업 도구에서 직접 선택 [image] 도구를 선택합니다.
  2. 편집 창에서 모양을 수정할 개체에 마우스 포인터를 가져가면, 조절점 위치에서 마우스 포인터의 모양이 [image] 으로 바뀝니다.
  3. 수정할 개체의 조절점을 누르면, 선택한 조절점이 파란색으로 표시되면서 개체가 선택됩니다.
  4. 마우스로 조절점을 누른 채 끌어서 개체의 모양을 수정합니다.
  5. 같은 방법으로 다른 조절점도 마우스로 누른 채 끌어서 모양을 수정합니다.

타원, 사각형, 둥근 사각형과 같은 도형은 직접 선택 도구로 선택해도 조절점이 나타나지 않습니다. 도형을 패스로 바꾸려면 메뉴에서 [수정 > 패스로 변환하기]를 선택합니다.


그룹 만들기

여러 개의 개체를 그룹으로 묶어 하나의 개체처럼 다룰 수 있습니다.

  1. 작업 도구에서 선택 [image] 도구를 선택합니다.
  2. 편집 창 또는 레이어 탭의 목록에서 그룹으로 묶을 개체들을 선택합니다.
  3. 메뉴에서 [수정 > 그룹 만들기]를 실행하거나 레이아웃 도구 막대에서 그룹 만들기 [image] 를 누릅니다.
  4. 레이어 창의 목록에 '그룹'이라는 새로운 그룹 개체가 생기고, 개체들이 하나로 묶입니다. 그룹으로 묶인 개체는 선택이나 크기 조절 등의 동작이 함께 이루어집니다.


그룹 풀기

여러 개의 개체를 묶어서 만든 그룹을 풀어 원래의 개체들로 분리할 수 있습니다.

  1. 작업 도구에서 선택 [image] 도구를 선택합니다.
  2. 편집 창 또는 레이어 탭의 목록에서 그룹 개체를 선택합니다.
  3. 메뉴에서 [수정 > 그룹 풀기]를 실행하거나 레이아웃 도구 막대에서 그룹 풀기 [image] 를 누릅니다.
  4. 그룹으로 묶인 개체들이 풀리면서 레이어 탭에 원래의 개체들이 표시됩니다.


테두리 두께 바꾸기

개체의 테두리 두께를 원하는 형태로 바꾸어 편집할 수 있습니다.

  1. 작업 도구에서 선택 [image] 도구를 선택합니다.
  2. 편집 창에서 테두리 두께를 바꿔 줄 개체를 선택합니다.
  3. 속성 창의 테두리 탭에서 증감 단추를 누르거나 수치를 입력하여 테두리 두께를 지정합니다.

            4.

    테두리 두께 5

    테두리 두께 10


테두리 모양 바꾸기

개체의 테두리 선 모양을 다양한 종류로 바꿀 수 있습니다.

  1. 작업 도구에서 선택 [image] 도구를 선택합니다.
  2. 편집 창에서 테두리 모양을 바꿔 줄 개체를 선택합니다.
  3. 속성 창의 테두리 탭에서 펼침 목록 단추를 눌러 원하는 테두리 모양을 선택합니다. 패스를 실선 또는 다양한 점선 모양으로 바꿀 수 있습니다.
칠 탭의 앤티 앨리어싱(Anti Aliasing)을 개체에 적용하면, 가장자리 부분이 부드럽게 보이도록 처리합니다.


모서리 꾸미기

모서리와 단면의 모양과 시작점과 끝점의 모양을 바꿔줄 수 있습니다.

모서리 모양 꾸미기

  1. 작업 도구에서 선택 [image] 도구를 선택합니다.
  2. 편집 창에서 모서리 모양을 바꿀 개체를 선택합니다.
  3. 속성 창의 테두리 탭을 엽니다.
    • 단면 모양을 선택합니다.
      • 열린 패스의 끝점에서 단면이 끝나게 하려면 접한 단면 [image] 을 선택합니다.
      • 열린 패스의 끝점을 기준으로 두께만큼의 반지름으로 단면을 동그랗게 처리하려면 둥근 단면 [image] 을 선택합니다.
      • 열린 패스의 끝점을 기준으로 두께만큼 단면을 튀어나오게 처리하려면 돌출 단면 [image] 을 선택합니다.
    • 모서리 모양을 선택합니다.
      • 모서리를 뾰족하게 처리하려면 모나게 [image] 를 선택합니다. 모서리 한계는 모나게 [image] 를 선택했을 때만 활성화됩니다.
      • 모서리를 경사지게 처리하려면 모서리 깎기 [image] 를 선택합니다.
      • 모서리를 둥글게 처리하려면 둥글게 [image] 를 선택합니다.

시작점과 끝점 모양 꾸미기

  1. 작업 도구에서 선택 [image] 도구를 선택합니다.
  2. 편집 창에서 모서리 모양을 바꿀 개체를 선택합니다.
  3. 속성 창의 테두리 탭에서 시작점과 끝점의 모양과 크기를 선택합니다.
    • 첫 번째 펼침 목록에서 모양을 지정합니다.
    • 두 번째 펼침 목록에서 크기를 선택합니다.


채우기 위에 테두리

개체의 테두리 그리는 방법을 속성 창의 칠 탭에서 설정할 수 있습니다.

  • 칠 탭의 채우기 위에 테두리를 선택하면 개체 외곽의 경계선을 기준으로, 경계선 안쪽과 바깥쪽에 각각 테두리 두께의 절반씩 걸쳐 그려집니다. 따라서 채우기 영역의 크기는 테두리 두께의 절반만큼 줄어듭니다.

  • 칠 탭의 채우기 위에 테두리를 선택 해제하면 개체 외곽의 경계선을 기준으로, 경계선 바깥쪽에만 테두리 두께의 절반만 그려집니다. 따라서 채우기 영역의 크기는 변함이 없지만 테두리 두께는 지정한 값의 절반만큼 표시됩니다.

SVG 파일로 저장할 때는 채우기 위에 테두리 선택 여부에 관계없이 항상 채우기 위에 테두리가 선택된 상태로 내보내집니다.


확대/축소하기

편집 창에 삽입된 개체를 확대 혹은 축소하면 개체 편집을 보다 정밀하게 할 수 있습니다. 개체의 확대/축소는 화면에 보이는 배율만 조정하여 보여 주는 것으로 실제 개체 크기가 확대되거나 축소되는 것은 아닙니다.

확대하기

  1. 다음 중 한 가지 방법을 이용합니다.
    • 메뉴에서 [보기 > 확대]를 선택합니다.
    • 작업 도구에서 확대/축소 [image] 도구를 선택합니다. 마우스 포인터의 모양이 [image] 와 같이 바뀌면 편집 창을 클릭합니다.
    • 단축키 <Ctrl++>를 누릅니다.
  2. 개체를 확대하여 보여 줍니다. 작업을 반복할 때마다 계속해서 정해진 비율로 확대하여 보여 줍니다.

축소하기

  1. 다음 중 한 가지 방법을 이용합니다.
    • 메뉴에서 [보기 > 축소]를 선택합니다.
    • 작업 도구에서 확대/축소 [image] 도구를 선택합니다. 마우스 포인터의 모양이 [image] 와 같이 바뀝니다. <Alt> 키를 누른 채로 마우스 포인터의 모양이 [image] 와 같이 바뀌었을 때 편집 창을 클릭합니다.
    • 단축키 <Ctrl+->를 누릅니다.
  2. 개체를 축소하여 보여 줍니다. 작업을 반복할 때마다 계속해서 정해진 비율로 축소하여 보여 줍니다.

원래 크기로

  1. 다음 중 한 가지 방법을 이용합니다.
    • 메뉴에서 [보기 > 원래 크기로]를 선택합니다.
    • 작업 도구에서 확대/축소 [image] 도구를 더블 클릭합니다.
    • 단축키 <Ctrl+0>을 누릅니다.
  2. 개체를 원래 크기로 보여 줍니다.
편집 중인 문서의 현재 배율 정보는 편집 창 제목 막대에 %로 표시됩니다.


이동 대화 상자

[수정 > 변형 > 이동], <Ctrl+Alt+M>

  • 이동 거리 X
    개체가 이동할 X축 이동 거리를 지정합니다. 현재 개체가 위치한 X축 좌표를 기준으로 이동합니다.
  • 이동 거리 Y
    개체가 이동할 Y축 이동 거리를 지정합니다. 현재 개체가 위치한 Y축 좌표를 기준으로 이동합니다.
  • 복사하기
    새로운 좌표가 반영된 개체를 복사합니다. 반복 횟수를 통해 복사할 개체의 수를 지정합니다.
    • 반복
      복사하기를 선택하면 활성화됩니다. 개체를 몇 번 복사할 것인지 지정합니다.
  • 그라디언트 변형
    선택 표시하면 개체를 변형할 때 그라디언트도 함께 이동해 줍니다.
  • 패턴 변형
    선택 표시하면 개체를 변형할 때 패턴도 함께 이동해 줍니다.


크기 조절 대화 상자

[수정 > 변형 > 크기 조절], <Ctrl+Alt+S>

  • 너비
    개체의 가로 길이를 %로 지정합니다.
  • 높이
    개체의 세로 길이를 %로 지정합니다.
  • 너비/높이 비율 유지
    개체의 가로/세로 비율을 유지한 채로 비율을 지정합니다.
  • 복사하기
    변경한 크기로 개체를 복사하게 됩니다.
  • 테두리 두께 함께 조절
    선택 표시하면 개체의 크기를 변형할 때 테두리 두께도 함께 조절해 줍니다.
  • 그라디언트 변형
    선택 표시하면 개체의 크기를 변형할 때 그라디언트도 함께 조절해 줍니다.
  • 패턴 변형
    선택 표시하면 개체의 크기를 변형할 때 패턴도 함께 조절해 줍니다.


회전/기울이기 대화 상자

[수정 > 변형 > 회전/기울이기], <Ctrl+Alt+R>

  • 회전
    • 각도 : 개체를 원하는 각도로 회전합니다.
  • 기울이기
    • X : 개체를 가로 방향으로 얼마나 기울일 것인가를 결정합니다.
    • Y : 개체를 세로 방향으로 얼마나 기울일 것인가를 결정합니다.
  • 복사하기
    회전/기울이기가 반영된 개체를 복사합니다. 반복 횟수를 통해 복사할 개체의 수를 지정합니다.
    • 반복
      복사하기를 선택하면 활성화됩니다. 개체를 몇 번 복사할 것인지 지정합니다.
  • 그라디언트 변형
    선택 표시하면 개체를 변형할 때 그라디언트도 함께 변형해 줍니다.
  • 패턴 변형
    선택 표시하면 개체를 변형할 때 패턴도 함께 변형해 줍니다.

기울이기의 X/Y값이 같을 경우, 주어진 값만큼 시계 방향으로 회전됩니다.


뒤집기 대화 상자

[수정 > 변형 > 뒤집기], <Ctrl+Alt+F>

  • 수평으로(X축)
    X축을 기준으로 개체를 상하로 뒤집습니다.
  • 수직으로(Y축)
    Y축을 기준으로 개체를 좌우로 뒤집습니다.
  • 각도
    개체를 뒤집을 축에 적용할 각도를 지정합니다.
  • 복사하기
    뒤집기가 반영된 개체를 복사합니다.
  • 그라디언트 변형
    선택 표시하면 개체를 뒤집을 때 그라디언트도 함께 변형해 줍니다.
  • 패턴 변형
    선택 표시하면 개체를 뒤집을 때 패턴도 함께 변형해 줍니다.

각도에 180이나 360을 입력하면 수평으로 (X축)을 선택한 것과 같이 개체를 상하로 뒤집습니다.각도에 90이나 270을 입력하면 수직으로(Y축)을 선택한 것과 같이 개체를 좌우로 뒤집습니다.


정렬하기

선택한 여러 개의 개체를 동시에 정렬할 때 사용합니다. 개체를 정렬할 때는 제일 마지막에 선택한 개체를 기준으로 정렬됩니다.

  1. 작업 도구에서 선택 [image] 도구를 선택합니다.
  2. <Shift>키를 누른 채로 정렬할 개체들을 편집 창 또는 레이어 목록에서 선택합니다. 정렬시 기준이 되는 개체(위치가 변경되지 않는 개체)를 제일 마지막에 선택합니다.
  3. 메뉴에서 [수정 > 정렬]을 실행하거나 레이아웃 도구 막대에서 정렬 방식을 선택합니다.
    • 왼쪽 정렬하려면 레이아웃 도구 막대에서 왼쪽 [image] 을 누르거나 메뉴에서 [왼쪽]을 선택합니다.
    • 가로줄 중앙에 정렬하려면 레이아웃 도구 막대에서 가운데 [image] 를 누르거나 메뉴에서 [가운데]를 선택합니다.
    • 오른쪽 정렬하려면 레이아웃 도구 막대에서 오른쪽 [image] 을 누르거나 메뉴에서 [오른쪽]을 선택합니다.
    • 위로 정렬하려면 레이아웃 도구 막대에서 위쪽 [image] 을 누르거나 메뉴에서 [위쪽]를 선택합니다.
    • 세로줄 중앙에 정렬하려면 레이아웃 도구 막대에서 중간 [image] 을 누르거나 메뉴에서 [중간]을 선택합니다.
    • 아래로 정렬하려면 레이아웃 도구 막대에서 아래쪽 [image] 을 누르거나 메뉴에서 [아래쪽]을 선택합니다.
편집 창에서 마우스를 누른 채 끌어 여러 개의 개체를 동시에 선택했을 때는 레이어 목록에서 가장 아래에 위치한 개체가 너비를 맞추는 기준이 됩니다.


크기 맞추기

선택한 개체들의 너비, 높이를 같게 할 때 사용합니다. 제일 마지막 선택한 개체를 기준으로 너비가 맞춰집니다.

  1. <Shift>키를 누른 채로 크기를 맞출 개체들을 편집 창 또는 레이어 목록에서 선택합니다. 너비를 맞추는 기준이 되는 개체(너비가 변경되지 않는 개체)를 제일 마지막에 선택합니다.
  2. 다음 중 한 가지를 선택합니다.
    • 너비를 맞추려면, 메뉴에서 [수정 > 같은 크기로 > 너비 맞추기]를 선택하거나 레이아웃 도구 막대에서 너비 맞추기 [image] 를 선택합니다.
    • 높이를 맞추려면, 메뉴에서 [수정 > 같은 크기로 > 높이 맞추기]를 선택하거나 레이아웃 도구 막대에서 높이 맞추기 [image] 를 선택합니다.
    • 너비와 높이를 맞추려면, 메뉴에서 [수정 > 같은 크기로 > 너비/높이 맞추기]를 실행하거나 레이아웃 도구 막대에서 같은 크기로 맞추기 [image] 를 선택합니다.
편집 창에서 마우스를 누른 채 끌어 여러 개의 개체를 동시에 선택했을 때는 레이어 목록에서 가장 아래에 위치한 개체가 너비를 맞추는 기준이 됩니다.


간격 맞추기

선택한 개체들의 간격을 동일하게 배분하거나 맞출 때 사용합니다.

간격 배분하기

  1. 작업 도구에서 선택 [image] 도구를 선택합니다.
  2. <Shift>키를 누른 상태에서 간격을 배분할 개체들을 편집 창에서 선택합니다.
  3. 메뉴에서 [수정 > 배분]을 실행하거나 레이아웃 도구 막대에서 간격 배분 방식을 선택합니다. 양쪽 끝에 위치한 개체를 기준으로 간격을 배분합니다.
    • 기준 개체의 왼쪽을 기준으로 간격을 배분하려면, 레이아웃 도구 막대에서 왼쪽 [image] 을 누르거나 메뉴에서 [왼쪽]을 선택합니다.
    • 기준 개체의 가운데를 기준으로 간격을 배분하려면, 레이아웃 도구 막대에서 가운데 [image] 를 누르거나 메뉴에서 [가운데]를 선택합니다.
    • 기준 개체의 오른쪽을 기준으로 나머지 개체들의 간격을 배분하려면, 레이아웃 도구 막대에서 오른쪽 [image] 을 누르거나 메뉴에서 [오른쪽]을 선택합니다.
    • 기준 개체의 위쪽을 기준으로 간격을 배분하려면, 레이아웃 도구 막대에서 위쪽 [image] 을 누르거나 메뉴에서 [위쪽]를 선택합니다.
    • 기준 개체의 중간을 기준으로 간격을 배분하려면, 레이아웃 도구 막대에서 중간 [image] 을 누르거나 메뉴에서 [중간]을 선택합니다.
    • 기준 개체의 아래쪽을 기준으로 간격을 배분하려면, 레이아웃 도구 막대에서 아래쪽 [image] 을 누르거나 메뉴에서 [아래쪽]을 선택합니다.

간격 맞추기

선택한 개체들의 간격을 동시에 맞출 수 있습니다. 양쪽 끝에 위치한 개체를 기준으로 간격이 맞춰집니다.

  1. 작업 도구에서 선택 [image] 도구를 선택합니다.
  2. <Shift>키를 누른 상태에서 간격을 맞출 개체들을 편집 창에서 선택합니다.
  3. 메뉴에서 [수정 > 배분]를 실행하거나 레이아웃 도구 막대에서 간격을 맞출 방향을 선택합니다.
    • 수평 간격을 같게 하려면, 레이아웃 도구 막대에서 수평 간격 맞추기 [image] 를 누르거나 메뉴에서 [수평 간격 맞추기]를 선택합니다.
    • 수직 간격을 같게 하려면, 레이아웃 도구 막대에서 수직 간격 맞추기 [image] 를 누르거나 메뉴에서 [수직 간격 맞추기]를 선택합니다.


겹치기 순서 바꾸기

여러 개의 개체들이 겹쳐 있을 때 겹치기 순서를 바꿔주면 개체에 다양한 효과를 줄 수 있습니다.

  1. 작업 도구에서 선택 [image] 도구를 선택합니다.
  2. 편집 창에서 겹치기 순서를 바꿀 개체를 선택합니다.
  3. 메뉴에서 [수정 > 순서 바꾸기]를 선택하거나 레이아웃 도구 막대에서 배치 방식을 지정합니다.
    • 선택한 개체를 맨 앞으로 가져오려면, 레이아웃 도구 막대에서 맨 앞으로 가져오기 [image] 를 누르거나 메뉴에서 [맨 앞으로 가져오기]를 선택합니다. 선택한 개체는 레이어 목록의 제일 위로 이동합니다.
    • 선택한 개체를 한 단계 앞으로 가져오려면, 레이아웃 도구 막대에서 앞으로 가져오기 [image] 를 누르거나 메뉴에서 [앞으로 가져오기]를 선택합니다. 선택한 개체는 레이어 목록에서 한 단계 위로 이동합니다.
    • 선택한 개체를 한 단계 뒤로 보내려면, 레이아웃 도구 막대에서 뒤로 보내기 [image] 를 누르거나 메뉴에서 [뒤로 보내기]를 선택합니다. 선택한 개체는 레이어 목록에서 한 단계 아래로 이동합니다.
    • 선택한 개체를 맨 뒤로 보내려면, 레이아웃 도구 막대에서 맨 뒤로 보내기 [image] 를 누르거나 메뉴에서 [맨 뒤로 보내기]를 선택합니다. 선택한 개체는 레이어 목록의 제일 아래로 이동합니다.

레이어 창의 레이어 탭에서 목록에 나타난 항목을 마우스로 끌어 개체의 겹치기 순서를 바꿀 수도 있습니다.


가우시안 블러 효과 주기

개체에 가우시안 블러 효과를 적용할 수 있습니다.

  1. 작업 도구에서 선택 [image] 도구를 선택합니다.
  2. 가우시안 블러 효과를 적용할 개체를 선택합니다.
  3. 다음 중 한 가지 방법을 이용합니다.
    • 메뉴에서 [효과 > 가우시안 블러 효과]를 선택합니다.
    • 속성 창 효과 탭에서 효과 추가하기 효과 추가 를 누릅니다.
  4. 가우시안 블러 효과 대화 상자에서 반지름 X/Y를 지정합니다.
    5. 원본 | 가우시안 블러 효과


그림자 효과 주기

개체에 그림자 효과를 적용할 수 있습니다.

  1. 작업 도구에서 선택 [image] 도구를 선택합니다.
  2. 그림자 효과를 적용할 개체를 선택합니다.
  3. 다음 중 한 가지 방법을 이용합니다.
    • 메뉴에서 [효과 > 그림자 효과]를 선택합니다.
    • 속성 창 효과 탭에서 효과 추가하기 효과 추가 를 누릅니다.
  4. 그림자 효과 대화 상자에서 종류, 상대 위치 X/Y, 색깔, 번짐 반경, 불투명도를 지정합니다.
    5. 원본 | 그림자 효과


베벨 효과 주기

개체에 베벨 효과를 적용할 수 있습니다.

  1. 작업 도구에서 선택 [image] 도구를 선택합니다.
  2. 베벨 효과를 적용할 개체를 선택합니다.
  3. 다음 중 한 가지 방법을 이용합니다.
    • 메뉴에서 [효과 > 베벨 효과]를 선택합니다.
    • 속성 창 효과 탭에서 효과 추가하기 효과 추가 를 누릅니다.
  4. 베벨 효과 대화 상자에서 모양, 너비, 깊이, 번짐 반경, 빛의 각도, 빛의 높이, 색깔을 지정합니다.
    5. 원본 | 베벨 효과


확산 효과 주기

개체에 확산 효과를 적용할 수 있습니다.

  1. 작업 도구에서 선택 [image] 도구를 선택합니다.
  2. 확산 효과를 적용할 개체를 선택합니다.
  3. 다음 중 한 가지 방법을 이용합니다.
    • 메뉴에서 [효과 > 확산 효과]를 선택합니다.
    • 속성 창 효과 탭에서 효과 추가하기 효과 추가 를 누릅니다.
  4. 확산 효과 대화 상자에서 종류, 상대 위치, 색깔, 번짐 반경을 지정합니다.
    5. 원본 | 바깥쪽 확산 효과


밝기/대비 바꾸기

개체에 밝기나 대비 효과를 다르게 적용할 수 있습니다.

  1. 작업 도구에서 선택 [image] 도구를 선택합니다.
  2. 밝기나 대비를 조절할 개체를 선택합니다.
  3. 다음 중 한 가지 방법을 이용합니다.
    • 메뉴에서 [효과 > 밝기/대비]를 선택합니다.
    • 속성 창 효과 탭에서 효과 추가하기 효과 추가 를 누릅니다.
  4. 밝기/대비 대화 상자에서 밝기, 대비 속성을 지정합니다.
    5. 원본 | 밝기 50
원본 | 대비 50


색상/채도 바꾸기

개체에 색상이나 채도를 다르게 적용할 수 있습니다.

  1. 작업 도구에서 선택 [image] 도구를 선택합니다.
  2. 색상이나 채도를 조절할 개체를 선택합니다.
  3. 다음 중 한 가지 방법을 이용합니다.
    • 메뉴에서 [효과 > 색상/채도]를 선택합니다.
    • 속성 창 효과 탭에서 효과 추가하기 효과 추가 를 누릅니다.
  4. 색상/채도 대화 상자에서 색상 회전, 채도 속성을 지정합니다.
    5. 원본 | 색상 50도
원본 | 채도 50%


효과 편집하기

개체에 적용되어 있는 효과를 각각 선택하여 편집하거나 삭제할 수 있습니다. 여러 개의 효과가 적용된 경우 효과의 순서를 바꾸면 편집 창에 보이는 개체의 모습이 달라 보일 수 있습니다. 기본적으로 효과 목록 위에 위치한 효과가 먼저 적용됩니다.

  1. 작업 도구에서 선택 [image] 도구를 선택합니다.
  2. 효과가 적용된 개체를 선택합니다.
  3. 속성 창의 효과 탭을 엽니다.
  4. 다음 중 한 가지를 선택합니다.
    • 효과를 편집하려면, 효과 목록에서 효과를 선택한 뒤 효과 편집하기 [image] 을 누르고 해당 효과 대화 상자에서 효과를 편집합니다.
    • 효과를 삭제하려면, 목록에서 효과를 선택한 뒤 효과 삭제하기 [image] 를 누릅니다.
    • 효과 적용 순서를 바꾸려면, 목록에서 효과를 마우스로 누른 채 끌거나 위로 [image] , 아래로 [image] 를 눌러 순서를 바꿉니다.

효과 목록에서 위에 있는 효과일수록 우선적으로 적용됩니다. 효과 탭의 확인 상자를 선택 해제하면 해당 효과를 적용하지 않았을 때의 형태로 편집 창에 표시됩니다. 효과 적용 전후의 형태를 비교해가면서 편집할 수 있습니다.


가우시안 블러 효과 대화 상자

[효과 > 가우시안 블러 효과], [속성 창 - 효과 탭 - 가우시안 블러 효과 더블 클릭]

개체에 가우시안 블러 효과를 줄 때 이용합니다. 가우시안 블러 효과란 가장자리로 갈수록 개체의 윤곽이 흐려지는 효과입니다.

속성

  • 반지름 X, 반지름 Y

    • 개체의 X 또는 Y축 반지름을 픽셀로 지정하여 블러 효과를 설정합니다.

  • X/Y 맞추기
    X/Y축 반지름이 동시에 조정됩니다. 기본값으로 선택되어 있습니다.

미리보기 창

개체에 지정한 가우시안 블러 효과를 미리 확인할 수 있습니다.

  • 확대
    개체를 확대해서 보여 줍니다. 클릭할 때마다 개체가 확대됩니다.
  • 축소
    개체를 축소해서 보여 줍니다. 클릭할 때마다 개체가 축소됩니다.


그림자 효과 대화 상자

[효과 > 그림자 효과], [속성 창 - 효과 탭 - 그림자 효과 더블 클릭]

개체에 그림자 효과를 주거나 그림자 속성을 변경할 때 이용합니다.

속성

  • 종류
    • 바깥쪽 그림자 | 개체의 바깥쪽에 그림자를 만듭니다.
안쪽 그림자 | 개체의 안쪽에 그림자를 만듭니다.
  • 상대 위치 X/Y
    개체를 기준으로 그림자의 상대 위치를 픽셀로 지정합니다. 양수를 입력하면 오른쪽 또는 아래쪽으로, 음수를 입력하면 왼쪽 또는 위쪽으로 그림자가 이동합니다.
  • 색깔
     색깔 편집 대화 상자에서 그림자의 색깔을 지정합니다.
  • 번짐 반경
    그림자의 번짐 효과가 적용되는 반경을 픽셀로 설정합니다.
  • 불투명도
    그림자의 불투명도를 %로 지정합니다.

미리보기 창

  • 확대
    개체를 확대해서 보여 줍니다. 클릭할 때마다 개체가 확대됩니다.
  • 축소
    개체를 축소해서 보여 줍니다. 클릭할 때마다 개체가 축소됩니다.


베벨 효과 대화 상자

[효과 > 베벨 효과], [속성 창 - 효과 탭 - 베벨 효과 더블 클릭]

개체에 베벨 효과를 주거나 베벨 효과 속성을 변경할 때 이용합니다.

가장자리

  • 모양
    • 직선 | 각이 지게 솟아오른 단추 모양을 만듭니다.
사인 곡선 | 각이 진 단추 모양에서 모서리를 부드럽게 만듭니다.
원 | 둥글게 솟아오른 단추 모양을 만듭니다.
  • 너비
    베벨 효과의 너비를 픽셀로 지정합니다. 높은 숫자를 입력할수록 단추가 위로 돌출되어 보입니다.
  • 깊이
    베벨 효과의 깊이를 % 단위로 지정합니다.
  • 번짐 반경
    베벨 효과의 번짐 반경을 픽셀로 지정합니다.

광원

  • 빛의 각도
    베벨 효과를 주는 빛의 각도를 지정합니다.
  • 빛의 높이
    베벨 효과를 주는 빛의 높이를 지정합니다.
  • 색깔
    베벨 효과를 주는 색깔을 지정합니다.

미리보기 창

  • 확대
    개체를 확대해서 보여 줍니다. 클릭할 때마다 개체가 확대됩니다.
  • 축소
    개체를 축소해서 보여 줍니다. 클릭할 때마다 개체가 축소됩니다.


확산 효과 대화 상자

[효과 > 확산 효과], [속성 창 - 효과 탭 - 확산 효과 더블 클릭]

개체에 네온 사인이나 형광등처럼 빛이 확산되는 효과를 줍니다.

속성

  • 종류

    바깥쪽 확산 효과

    개체의 바깥쪽에 확산되는 효과를 만듭니다.

    안쪽 확산 효과

    개체의 안쪽에 확산되는 효과를 만듭니다.

  • 상대 위치
    개체를 기준으로 확산 모양의 위치를 픽셀로 설정합니다.
  • 색깔
    확산 효과 색깔을 색깔 편집 대화 상자에서 지정합니다.
  • 번짐 반경
    확산 효과가 적용될 때 흐림(blur)의 정도를 조절합니다. 수치가 높을수록 더 흐려집니다.

미리보기 창

  • 확대
    개체를 확대해서 보여 줍니다. 클릭할 때마다 개체가 확대됩니다.
  • 축소
    개체를 축소해서 보여 줍니다. 클릭할 때마다 개체가 축소됩니다.


밝기/대비 대화 상자

[효과 > 밝기/대비], [속성 창 - 효과 탭 - 밝기/대비 더블 클릭]

개체의 밝기(Brightness)와 대비(Contrast)를 조절할 때 이용합니다.

  • 밝기
    개체의 밝기를 %로 조절합니다. 수치가 높을수록 밝아집니다.
  • 대비
    개체에 대비 효과를 %로 조절합니다.


색상/채도 대화 상자

[효과 > 색상/채도], [속성 창 - 효과 탭 - 색상/채도 더블 클릭]

개체의 색상(Hue)과 채도(Saturation)를 조절할 때 이용합니다.

  • 색상 회전
    개체의 색상을 '도' 단위로 지정합니다.
  • 채도
    개체의 채도를 '%' 단위로 지정합니다.


마스크란?

마스크란?

마스크는 개체의 불필요한 부분을 가릴 때 사용합니다. 위에 놓인 개체는 마스크의 역할을 하고, 밑에 놓인 개체에는 마스킹이 적용됩니다. 마스크를 적용하면 그림의 원하는 부분만을 다양한 모양으로 만들 수 있습니다. 뿐만 아니라, 마스크의 역할을 하는 개체와 마스킹이 적용될 개체의 색깔 또는 무늬가 투명하게 겹쳐지도록 표현할 수 있습니다.

원본 그림

마스크가 적용된 그룹 개체

웹캔버스에서 편집 창에 삽입한 개체는 마스크를 이용하여 다양하게 편집할 수 있습니다.


마스크 만들기

마스크를 적용하여 그림의 원하는 부분만을 다양한 모양으로 만들 수 있습니다.

  1. 작업 도구에서 선택 [image] 도구를 선택합니다.
  2. 편집 창에서 마스크를 적용할 개체와 마스크로 사용할 개체를 선택합니다. 마스크로 사용할 개체가 마스크를 적용할 개체보다 더 위쪽의 겹치기 순서를 갖고 있어야 합니다.
  3. 메뉴에서 [수정 > 마스크 > 만들기]를 선택합니다. 레이어 목록에 '마스크 그룹'이라는 새로운 마스크 그룹 개체가 생깁니다.

레이어 창의 레이어 목록에서 마스크를 만들 개체를 선택해도 됩니다. 마스크로 사용할 개체가 마스크를 적용할 개체보다 레이어 목록에서 더 위쪽에 있어야 합니다.


마스크 풀기

마스크를 적용한 마스크 그룹 개체는 필요에 따라 언제든지 원래의 개체들로 분리할 수 있습니다.

  1. 작업 도구에서 선택 [image] 도구를 선택합니다.
  2. 편집 창 또는 레이어 창의 레이어 목록에서 마스크 그룹을 선택합니다.
  3. 메뉴에서 [수정 > 마스크 > 풀기]를 선택합니다. 마스크가 풀리고 레이어 목록에 원래의 개체들이 표시됩니다.


하이퍼링크 만들기

작성한 이미지를 SVG 파일로 내보낼 경우, 이미지를 클릭하면 지정한 주소(URL)로 이동하는 하이퍼링크를 만듭니다.

  1. 작업 도구에서 선택 [image] 도구를 누릅니다.
  2. 편집 창에서 하이퍼링크를 지정할 개체를 선택합니다.
  3. 메뉴에서 [수정 > 하이퍼링크 > 만들기]를 선택하거나 단축키 <F9>를 누릅니다.
  4. 하이퍼링크 만들기 대화 상자에서 개체를 눌렀을 때 이동할 주소(URL)을 입력합니다.
  5. 하이퍼링크가 적용된 개체는 레이어 창에서 목록 오른쪽에 하이퍼링크 아이콘이 표시됩니다.

    6. 예) 패스 개체에 하이퍼링크가 적용된 경우

메뉴에서 [보기 > 브라우저에서 SVG 미리보기]를 선택하면, 하이퍼링크가 제대로 작동하는지 확인할 수 있습니다. SVG 미리보기를 실행하려면 웹 브라우저에 SVG viewer 플러그인이 설치되어 있어야 합니다.


하이퍼링크 지우기

개체에 지정된 하이퍼링크를 지울 수 있습니다.

  1. 작업 도구의 선택 [image] 도구를 선택니다.
  2. 편집 창에서 하이퍼링크를 삭제할 개체를 선택합니다.
  3. 메뉴에서 [수정 > 하이퍼링크> 지우기]를 선택하거나 <Shift+F9>키를 누릅니다.


하이퍼링크 만들기 대화 상자

[수정 > 하이퍼링크 > 만들기], {개체 선택 - 하이퍼링크 > 만들기}, <F9>

하이퍼링크는 SVG 파일로 내보냈을 때만 작동합니다.

  • 주소(URL)
    개체를 눌러 이동할 주소(URL)을 입력합니다.

SVG 파일로 저장했을 경우에만 하이퍼링크가 적용됩니다. 하이퍼링크가 제대로 삽입되었는지 확인하려면, 메뉴에서 [보기 > 브라우저에서 SVG 미리보기]를 선택하거나 <F11>키를 누릅니다.


레이어란?

레이어란?

개체들은 마치 종이와 같은 가상의 공간 위에 겹쳐지듯이 만들어집니다. 이러한 공간을 레이어라고 하며 순차적으로 차곡차곡 놓여진 여러 개체들을 한데로 묶어서 쉽게 관리하기 위해 사용하는 최상위 개념의 '그룹' 또는 '폴더'와 같은 역할을 합니다. 웹캔버스의 레이어는 한 개의 개체가 한 개의 레이어를 점유하는 것이 아니라, 한 개의 레이어 안에 한 개 이상의 개체를 포함합니다. 그림 파일을 구성하는 최소 단위가 개체라면 이 개체들이 모여 그룹을 이루고, 레이어는 그 그룹을 포괄합니다.

레이어 창의 레이어 탭을 통해 그림에 사용된 개체나 그룹의 정보를 확인하고 관리할 수 있습니다. 여러 개의 개체나 그룹을 하나로 묶어 관리할 수 있는 기능을 제공하며, 개체나 그룹의 겹치기 순서를 바꾸거나 보이기를 감출 수 있고 필요에 따라서는 삭제할 수도 있습니다.


레이어 추가하기

현재 편집 중인 시트에 레이어를 추가할 수 있습니다.

  1. 레이어 창의 레이어 탭을 엽니다.
  2. 레이어 추가하기 [image] 를 누르거나 하위 메뉴의 [추가하기]를 선택합니다.
  3. 새로 추가된 레이어가 레이어 목록의 가장 위에 나타납니다.


레이어 삭제하기

불필요한 레이어를 삭제할 수 있습니다. 레이어를 삭제하면 레이어 안에 포함된 개체도 함께 삭제됩니다.

  1. 레이어 창의 레이어 탭을 엽니다.
  2. 삭제하려는 레이어를 선택합니다.
  3. 개체 삭제하기 [image] 를 누르거나 하위 메뉴의 [삭제하기]를 선택합니다.

웹캔버스에서 작업하는 모든 이미지는 1개 이상의 레이어와 시트를 필요로 하기 때문에 레이어가 1개 뿐일 때에는 레이어를 삭제할 수 없습니다.


레이어 복사하기

선택한 레이어를 복사할 수 있습니다.

  1. 레이어 창의 레이어 탭을 엽니다.
  2. 레이어 목록에서 복사할 레이어를 선택합니다.
  3. 하위 메뉴에서 [복사하기]를 선택합니다.
  4. 복사된 레이어가 목록에 표시됩니다.


혼합 모드 지정하기

개체의 혼합 모드를 지정합니다. "혼합 모드"란 현재 편집 중인 개체의 픽셀을 하위 개체와 결합하는 방법입니다. 개체가 실제로 섞여지는 것이 아니라 보이기 형식만 바뀌는 것입니다.

  1. 레이어 창의 레이어 탭을 엽니다.
  2. 혼합 모드를 지정할 개체를 레이어 목록에서 선택합니다.
  3. 혼합 모드에서 원하는 종류를 선택합니다.
  4. 선택한 혼합 모드가 적용된 결과가 편집 창에 나타납니다.
    5. 예) 오른쪽 아래 원을 기준으로 표시한 혼합 모드
기본 | 곱하기 | 스크린
어둡게 | 밝게 |


불투명도 지정하기

개체 또는 그룹의 불투명도를 지정할 수 있습니다.

  1. 레이어 창의 레이어 탭을 엽니다.
  2. 불투명도를 지정할 개체를 레이어 목록에서 선택합니다.
  3. 불투명도를 지정합니다. 0%는 완전히 투명, 100%는 완전히 불투명한 상태입니다.
  4. 선택한 개체에 지정한 불투명도가 적용되어 편집 창에 표시됩니다.


레이어/개체 이름 바꾸기

레이어 또는 레이어에 포함된 개체의 이름을 원하는 대로 바꿀 수 있습니다.

  1. 레이어 창의 레이어 탭을 엽니다.
  2. 레이어 목록에서 이름을 바꿀 레이어, 그룹, 개체를 더블 클릭하거나, 하위 메뉴에서 [이름 바꾸기] 또는 [개체 이름 바꾸기]를 선택합니다.
  3. 이름 바꾸기 대화 상자의 이름에 원하는 이름을 입력한 뒤 확인 단추를 누릅니다.

레이어 왼쪽의 [image] / [image] 표시는 레이어가 닫히거나 펼쳐진 상태를 의미합니다. 레이어가 닫혀진 [image] 표시일 때는 레이어에 포함된 개체가 보이지 않습니다. 표시를 누르면 레이어가 펼쳐지면서 [image] 표시로 바뀌고 레이어에 포함된 개체가 목록에 나타납니다.


레이어/개체 순서 바꾸기

레이어와 개체의 순서를 바꿀 수 있습니다. 레이어 목록에서 위쪽에 있는 개체는 실제 문서 상에서 위에, 목록에서 아래쪽에 있는 개체는 겹치기 순서가 밑에 있는 것을 의미합니다.

  1. 레이어 창의 레이어 탭을 엽니다.
  2. 레이어 목록에서 순서를 바꿀 레이어 또는 개체를 마우스로 누른 채 끌어서 원하는 위치로 옮깁니다.


레이어/개체 잠그기

작업이 이미 끝났거나, 작업하는 데 방해가 되는 레이어나 개체는 잠그기 기능을 이용하여 편집할 수 없도록 만들 수 있습니다. 잠긴 레이어나 개체는 화면 상에는 나타나지만 선택하거나 편집할 수 없습니다.

  1. 레이어 창의 레이어 탭을 엽니다.
  2. 레이어 목록에서 감출 레이어를 선택합니다.
  3. 왼쪽 두 번째 사각형 빈 공간을 눌러 자물쇠 표시 [image] 가 나타나게 합니다.
  4. 해당 레이어 또는 개체가 잠금 상태로 설정됩니다. 레이어 또는 개체가 잠겼을 때는 편집 창에는 나타나지만 선택하거나 편집할 수는 없습니다.

레이어를 잠그면 레이어에 포함된 모든 개체도 모두 잠깁니다. 잠금을 해제하려면 자물쇠 표시 [image] 를 누릅니다.


레이어/개체 감추기

작업 중인 레이어나 개체를 일시적으로 안 보이도록 감출 수 있습니다. 감추기로 설정한 개체는 편집 창에 표시되지는 않지만 선택하거나 편집할 수 있습니다.

  1. 레이어 창의 레이어 탭을 엽니다.
  2. 레이어 목록에서 감출 레이어를 선택합니다.
  3. 왼쪽에 있는 눈 모양 [image] 을 눌러 눈 모양이 없어지게 합니다. 해당 개체가 편집 창에서 보이지 않게 설정됩니다.

레이어를 감췄을 때 레이어에 포함된 모든 개체도 함께 감추어 집니다. 감춤 상태를 해제하려면 비활성화된 눈 모양 아이콘을 눌러 눈 모양 [image] 이 표시되도록 합니다.


레이어 미리보기 설정하기

레이어 목록 창에 표시되는 레이어 미리보기의 크기를 설정할 수 있습니다.

  1. 레이어 창에서 레이어 탭을 엽니다.
  2. 하위 메뉴의 [미리보기 설정]을 선택합니다.
  3. 미리보기 설정 대화 상자에서 원하는 크기를 선택합니다.
  4. 레이어 목록에 새로 설정된 크기의 레이어 미리보기가 나타납니다.

미리보기 설정 대화 상자에서 미리보기 없음을 선택하면 레이어 목록에서 미리보기 없이 이름만 표시됩니다.


이름 바꾸기 대화 상자

[레이어 창 - 레이어/시트 탭 - 개체, 레이어, 시트 이름 더블 클릭]
[레이어 창 - 레이어/시트 탭 - 하위 메뉴 > 레이어 이름 바꾸기/개체 이름 바꾸기/시트 이름 바꾸기]

개체, 레이어, 시트 이름을 변경할 때 사용합니다.

  • 이름
    새로 바꾸려는 개체, 레이어, 시트 이름을 입력합니다.


시트란?

시트란?

레이어가 여러 개체를 하나로 묶는 역할을 한다면 시트는 레이어와 개체를 하나로 묶는 상위 개념이자 파일의 하위 개념에 해당합니다. 한 장면을 구성하고 있는 여러 레이어들을 함께 관리하는 개념으로 주로 롤오버 버튼에서 Normal/Rollover/Highlight의 각각 다른 버튼 모양을 별도로 만들 때 사용합니다. 하나의 파일에는 여러 개의 시트가 존재할 수 있으며, 시트를 전환하면 편집 창에 나타나는 그림도 해당 시트의 상태로 바뀝니다.

레이어 창의 시트 탭에서는 문서에 포함된 모든 시트 목록을 확인하고 시트를 추가/복사/삭제하거나 시트의 이름을 수정할 수 있습니다.


시트 추가하기

시트를 추가하여 편집할 수 있습니다.

  1. 레이어 창의 시트 탭을 엽니다.
  2. 아래의 시트 추가하기 [image] 단추를 누르거나 하위 메뉴의 [추가하기]를 선택합니다.
  3. 새로 추가된 시트가 시트 목록의 가장 아래에 나타납니다.


시트 삭제하기

불필요한 시트는 삭제할 수 있습니다. 시트를 삭제하면 시트 안에 포함된 레이어와 개체가 모두 삭제됩니다.

  1. 레이어 창의 시트 탭을 엽니다.
  2. 삭제할 시트를 선택합니다.
  3. 시트 삭제하기 [image] 를 누르거나 하위 메뉴에서 [삭제하기]를 선택합니다.


시트 복사하기

이미 만들어 놓은 시트를 선택하여 복사할 수 있습니다. 특히 롤오버 버튼을 만들기 위해 기존 버튼을 복사하여 수정할 때 유용합니다.

  1. 레이어 창에서 시트 탭을 선택합니다.
  2. 시트 목록에서 복사할 시트를 선택합니다.
  3. 하위 메뉴에서 [복사하기]를 선택하거나 시트 복사하기 [image] 를 누릅니다.
  4. 선택한 시트의 아래에 복사된 시트가 목록에 나타납니다.


시트 이름 바꾸기

시트의 이름을 원하는 대로 바꿀 수 있습니다.

  1. 레이어 창의 시트 탭을 엽니다.
  2. 시트 목록에서 이름을 바꿀 시트를 더블 클릭하거나 시트를 선택한 후 하위 메뉴에서 [이름 바꾸기]를 선택합니다.
  3. 이름 바꾸기 대화 상자에서 이름에 원하는 이름을 입력한 뒤 확인 단추를 누릅니다.
  4. 바뀐 이름이 시트 목록에 나타납니다.

롤오버 스마트 버튼을 만들 때는 반드시 각 시트의 이름을 Normal/Rollover/Highlight로 지정해 주어야 합니다. 대소문자는 구분하지 않아도 됩니다.


라이브러리란?

라이브러리란 개체를 만들고 편집하는 데 필요한 요소들을 미리 정리하여 놓은 창고를 말합니다. 웹캔버스는 5가지 종류의 라이브러리를 제공합니다. 라이브러리를 이용하면 기존의 라이브러리에서 제공하는 요소들을 편리하게 쓸 수 있을 뿐만 아니라 사용자가 작업한 것을 새 라이브러리로 등록하여 필요할 때마다 사용할 수 있기 때문에 작업을 보다 효율적으로 할 수 있습니다.

웹캔버스가 제공하는 라이브러리는 다음과 같습니다. 각 라이브러리는 2개의 창(라이브러리 창, 견본 창)으로 나뉘어 제공됩니다.

견본 | 색깔 | 개체에 적용할 수 있는 색깔을 모아놓은 것입니다. 자주 사용하는 색깔을 추가하거나 필요없는 색을 삭제하여 편집할 수 있습니다.
 | 그라디언트 | 개체에 적용할 수 있는 그라이언트 형태를 모아놓은 것입니다.
 | 패턴 | 개체에 적용할 수 있는 여러 가지 무늬인 패턴을 모아놓은 것입니다.
라이브러리 | 스타일 | 개체에 적용할 수 있는 속성들을 묶어서 스타일 라이브러리로 제공합니다.
 | 모양 | 여러 형태의 벡터형 개체를 주제별로 모아 모양 라이브러리로 제공합니다. 사용자가 벡터/비트맵 개체를 추가하여 사용할 수 있습니다.


새 라이브러리 만들기

견본 창과 라이브러리 창의 각 탭에서 라이브러리를 새로 만들 수 있습니다.

  1. 견본 창 또는 라이브러리 창에서 새 라이브러리를 만들 탭을 엽니다.
  2. 하위 메뉴에서 [새 라이브러리]를 선택합니다.
  3. 새 라이브러리 대화 상자에서 이름에 라이브러리 이름을 입력한 뒤 확인 단추를 누릅니다.
  4. 새 라이브러리가 만들어집니다.


라이브러리 열기

견본 창과 라이브러리 창의 각 탭에서 이미 만들어둔 라이브러리를 선택하여 열 수 있습니다.

  1. 견본 창 또는 라이브러리 창에서 원하는 탭을 엽니다.
  2. 다음 중 하나를 선택합니다.
    • 하위 메뉴 아래에 표시되는 라이브러리 목록에서 원하는 라이브러리를 선택합니다.
    • 하위 메뉴에서 [라이브러리 열기]를 선택한 다음, 열기 대화 상자에서 원하는 라이브러리 파일을 선택합니다.

      • 각 라이브러리의 파일 확장자

      색깔 라이브러리 | *.ctb
그라디언트 라이브러리 | *.grb
패턴 라이브러리 | *.ptn
스타일 라이브러리 | *.sty
모양 라이브러리 | *.shp
  3. 선택한 라이브러리가 열립니다.

웹캔버스의 라이브러리 파일은 나모 웹에디터 5 파워 플러스가 설치된 폴더 아래 lib\WebCanvas 폴더의 하위 폴더(Color, Gradient, Pattern, Shape, Style)에 저장되며, 각각의 해당 폴더에 올바른 확장자명으로 저장되어 있어야만 하위 메뉴에 라이브러리 목록으로 나타납니다.


다른 라이브러리로 저장하기

견본 창과 라이브러리 창의 각 탭에서 현재 사용 중인 라이브러리를 다른 이름으로 저장할 수 있습니다.

  1. 견본 창 또는 라이브러리 창에서 원하는 탭을 엽니다.
  2. 하위 메뉴에서 [다른 라이브러리로 저장하기]를 선택합니다.
  3. 다른 이름으로 저장 대화 상자에서 파일 이름을 입력한 뒤 저장 단추를 누릅니다.

    각 라이브러리의 파일 확장자

    색깔 라이브러리 | *.ctb
그라디언트 라이브러리 | *.grb
패턴 라이브러리 | *.ptn
스타일 라이브러리 | *.sty
모양 라이브러리 | *.shp

웹캔버스의 라이브러리 파일은 나모 웹에디터 5 파워 플러스가 설치된 폴더 아래 lib\WebCanvas 폴더의 하위 폴더(Color, Gradient, Pattern, Shape, Style)에 저장되며, 각각의 해당 폴더에 올바른 확장자명으로 저장되어 있어야만 하위 메뉴에 라이브러리 목록으로 나타납니다.


라이브러리에 추가하기

견본 창의 색깔/그라디언트/패턴 탭에서 현재 사용 중인 라이브러리에 다른 라이브러리를 추가할 수 있습니다.

견본 창에서 추가하기

  1. 견본 창의 각 라이브러리 하위 메뉴에서 [라이브러리 추가하기]를 선택합니다.
  2. 열기 대화 상자에서 추가할 라이브러리 파일을 선택한 뒤 열기 단추를 누릅니다.
  3. 선택한 라이브러리의 색깔/그라디언트/패턴 목록이 현재 라이브러리에 추가되어 나타납니다.


라이브러리 초기화하기

견본 창 색깔/그라디언트/패턴 탭에서 기본 라이브러리를 편집했을 경우, 원래의 상태로 되돌릴 수 있습니다.

  1. 견본 창의 색깔/그라디언트/패턴 탭에서 기본 라이브러리를 편집합니다. 색깔/그라디언트/패턴을 새로 추가, 편집하거나 삭제합니다.
  2. 하위 메뉴의 [라이브러리 초기화하기]를 선택합니다.
  3. 라이브러리를 편집하기 전 기본 라이브러리 상태로 초기화됩니다.
사용자가 만든 라이브러리는 라이브러리 초기화 기능으로 되돌릴 수 없습니다.


새 라이브러리 대화 상자

[견본 창, 라이브러리 창- 색깔/그라디언트/패턴 탭, 스타일/모양 탭- 하위 메뉴 새 라이브러리]

새로운 라이브러리를 만들 때 사용합니다.

  • 이름
    새로 만들 라이브러리의 이름을 입력합니다.


내보내기 영역이란?

내보내기 영역은 문서에서 저장하거나 내보내기 할 부분입니다. 웹캔버스에서는 내보내기 영역으로 지정된 영역만을 TNG 파일 또는 비트맵 파일로 내보낼 수 있습니다.

예) 아래와 같이 내보내기 영역을 지정하고 저장했을 경우, 오른쪽과 같이 이미지가 저장됩니다.

내보내기 영역 지정 후 TNG 파일로 저장 | 내보내기 영역으로 지정된 부분만 저장됨.

내보내기 영역은 작업한 이미지를 웹캔버스 고유 파일 형식( *.tng)으로 저장할 때 사용됩니다. 비트맵 파일로 내보낼 때는 내보내기 영역대로 저장할 것이지 여부를 선택할 수 있으며, SVG 파일로 내보낼 경우에는 내보내기 영역과 관계없이 문서 전체가 내보내집니다.


내보내기 영역 지정하기

내보내기 영역을 지정하면 편집한 개체의 특정 부분만을 저장할 수 있으며, 내보내기 영역을 다른 파일 형식으로도 내보낼 수 있습니다.

내보내기 영역 그리기

  1. 작업 도구에서 내보내기 영역 [image] 도구를 선택합니다.
  2. 편집 창에서 개체를 포함하는 크기로 마우스를 누른 채 끌어 내보내기 영역을 그립니다. 개체의 내보내기 영역이 점선으로 표시됩니다.

메뉴에서 [보기 > 내보내기 영역 > 자동 설정]을 선택하거나 내보내기 영역 [image] 도구를 더블 클릭하면 개체들을 포함하는 최소 영역으로 내보내기 영역이 자동 설정됩니다.

수치 입력해서 내보내기 영역 지정하기

  1. 작업 도구에서 선택 [image] 도구를 선택합니다.
  2. 내보내기 영역을 지정할 개체를 선택합니다.
  3. 메뉴에서 [보기 > 내보내기 영역 > 설정]을 선택합니다.
  4. 내보내기 영역 대화 상자에서 개체를 내보낼 크기와 위치를 지정합니다.

개체의 내보내기 영역을 지정하지 않은 채 메뉴에서 [파일 > 저장하기/내보내기]를 실행하면 개체를 포함하는 최소한의 크기로 저장/내보내기가 실행됩니다.


내보내기 영역 변경하기

지정한 내보내기 영역의 크기와 위치를 조절할 수 있습니다.

  1. 작업 도구에서 내보내기 영역 [image] 도구를 선택합니다.
  2. 내보내기 영역에 조절점이 나타납니다. 다음 중 하나를 선택합니다.
    • 내보내기 영역 조절점을 마우스로 끌어 크기를 조절하거나 내보내기 영역 내부를 선택한 채 마우스로 끌어 위치를 조절합니다.

              •

    • 메뉴에서 [보기 > 내보내기 영역 > 설정]을 선택한 뒤 내보내기 영역 대화 상자에서 내보내기 영역의 크기와 위치를 변경합니다.
  3. 내보내기 영역의 바깥 영역을 선택하면 내보내기 영역을 다시 그릴 수 있습니다.

메뉴에서 [보기 > 내보내기 영역 > 자동 설정]을 실행하거나 내보내기 영역 [image] 도구를 더블 클릭하면 문서에 속해있는 모든 개체들을 포함하는 최소 영역으로 내보내기 영역이 자동 설정됩니다.

내보내기 영역이 보이지 않을 경우, 메뉴에서 [보기 > 내보내기 영역 > 보이기]를 선택합니다.


내보내기 영역 지우기

지정한 내보내기 영역을 지울 수 있습니다.

  1. 메뉴에서 [보기 > 내보내기 영역 > 지우기]를 선택합니다.
  2. 편집 창에서 지정했던 내보내기 영역이 지워집니다.

내보내기 영역을 지우지 않고 단지 편집 창에 보이지 않게 하려면, 메뉴에서 [보기 > 내보내기 영역 > 보이기]를 선택 해제합니다.


내보내기 영역 대화 상자

[보기 > 내보내기 영역 > 설정]

웹캔버스에서 편집한 개체의 내보내기 영역을 지정합니다. 내보내기 영역을 지정하여 특정 부분만을 저장하거나 따로 내보낼 수 있습니다. SVG 파일로 내보낼 경우에는 표시 영역과 관계없이 문서 전체가 내보내집니다.

크기

  • 너비/높이
    개체의 내보내기 영역 너비/높이를 직접 입력하거나 증감 단추를 눌러 지정해 줍니다.

위치

  • 시작 좌표 X/시작 좌표 Y
    내보내기 영역 좌측 상단 꼭지점 X /Y좌표를 직접 입력하거나 증감 단추를 눌러 지정해 줍니다.


저장하기

편집한 개체를 웹캔버스의 고유 파일 형식인 스마트 버튼 파일(*.tng)로 저장할 수 있습니다.

  1. 기본 도구 막대에서 저장하기 [image] 을 누르거나 메뉴에서 [파일 > 저장하기]를 선택합니다.
  2. 다른 이름으로 저장 대화 상자에서 파일 이름과 파일 형식을 지정한 뒤에 저장 단추를 누릅니다.
  3. 개체가 저장되고 문서의 제목 막대에 새로 지정한 파일 이름이 표시됩니다.


다른 이름으로 저장하기

편집한 개체를 다른 이름으로 저장할 수 있습니다.

  1. 메뉴에서 [파일 > 다른 이름으로 저장하기]을 선택합니다.
  2. 다른 이름으로 저장 대화 상자에서 파일 이름과 파일 형식을 지정한 뒤 저장 단추를 누릅니다.
  3. 문서 제목 막대에 바뀐 파일 이름이 표시됩니다.


복사본 저장하기

편집한 문서의 복사본을 다른 이름으로 저장할 수 있습니다. 이때 저장되는 복사본은 웹캔버스의 고유 파일 형식(*.tng)으로만 저장할 수 있습니다.

  1. 메뉴에서 [파일 > 복사본 저장하기]를 선택합니다.
  2. 복사본 저장하기 대화 상자에서 파일 이름을 지정한 후 저장 단추를 누릅니다.

[파일 > 복사본 저장하기]를 선택하면 복사본은 지정된 위치에 저장이 되고 현재 편집 중인 문서가 편집 창에 남아 있습니다.


인쇄 설정하기

인쇄할 용지의 크기 및 종류, 인쇄 방향을 설정할 수 있습니다. 인쇄 설정 대화 상자에서 설정한 내용은 모든 작업 문서에 적용됩니다. 따라서 문서를 인쇄하기 전에 먼저 인쇄 설정 내용을 확인합니다.
  1. 메뉴에서 [파일 > 인쇄 설정]을 선택합니다.
  2. 인쇄 설정 대화 상자에서 용지의 크기와 공급, 인쇄 방향을 설정하고 확인 단추를 누릅니다.


인쇄하기

현재 문서를 프린터로 출력할 수 있습니다.
  1. 메뉴에서 [파일 > 인쇄하기]를 선택합니다.
  2. 인쇄 대화 상자에서 인쇄할 범위와 매수를 지정하고 확인 단추를 누릅니다.

메뉴에서 [파일 > 인쇄 설정]을 선택하면 용지 크기 및 종류, 인쇄 방향을 설정할 수 있습니다.


브라우저에서 SVG 미리보기

편집 중인 개체가 SVG 파일 형태로 브라우저에서 보이는 모습을 미리 확인할 수 있습니다. 브라우저에서 SVG 미리보기를 실행하려면 프로그램 설정 대화 상자의 SVG 미리보기 탭에서 미리 경로를 지정해야 합니다.

  1. 메뉴에서 [보기 > 브라우저에서 SVG 미리보기]를 선택하거나 단축키 <F11>를 누릅니다.
  2. 웹 브라우저가 열리면서 편집 중인 개체를 SVG로 내보냈을 때의 형태를 미리 보여줍니다.

SVG 미리보기 탭에서 경로를 미리 지정해주지 않으면 경고 메시지를 보여주고, SVG 미리보기 탭에서 경로를 직접 입력할 수 있도록 대화 상자가 뜹니다.


SVG 파일로 내보내기

웹캔버스에서 작업한 파일을 SVG 파일로 내보낼 수 있습니다.

  1. 메뉴에서 [파일 > 내보내기 > SVG 파일]을 선택합니다.
  2. 내보내기 대화 상자에서 파일 이름을 지정하고, 파일 형식에 'SVG 파일(*.svg)'이나 'SVG 압축 파일(*.svgz)'을 선택합니다. 저장 단추를 누릅니다.
  3. SVG 파일(*.svg)을 선택하면 SVG 설정 대화 상자가 뜹니다. 세부 옵션을 지정한 뒤 확인 단추를 누릅니다.

메뉴에서 [보기 > 브라우저에서 SVG 미리보기]나 <F11>을 실행하면 현재 편집 중인 개체가 SVG 형태로 브라우저에서 보이는 모습을 미리 확인할 수 있습니다.


비트맵 파일로 내보내기

웹캔버스에서 작업한 파일을 비트맵 파일로 내보낼 수 있습니다.

  1. 비트맵으로 내보낼 부분을 내보내기 영역으로 지정합니다.
  2. 메뉴에서 [파일 > 내보내기 > 비트맵 파일]을 선택합니다.
  3. 내보내기 대화 상자에서 파일 이름과 파일 형식을 선택합니다.
    • BMP 파일로 내보내려면 '비트맵 파일(*.bmp)'을 선택한 뒤 저장 단추를 누릅니다. 비트맵 파일 내보내기 옵션 대화 상자에서 세부 옵션을 지정한 뒤 확인 단추를 누릅니다.
    • JPEG 파일로 내보내려면 'JPEG 파일(*.jpg ; *.jpeg)'을 선택한 뒤 저장 단추를 누릅니다. JPG 파일 내보내기 옵션 대화 상자에서 세부 옵션을 지정한 뒤 확인 단추를 누릅니다.
    • PNG 파일로 내보내려면 'PNG 파일(*.png)'을 선택한 뒤 저장 단추를 누릅니다. PNG 파일 내보내기 옵션 대화 상자에서 세부 옵션을 지정한 뒤 확인 단추를 누릅니다.
    • GIF 파일로 내보내려면 'GIF 파일(*.gif)'을 선택한 뒤 저장 단추를 누릅니다. GIF 파일 내보내기 옵션 대화 상자에서 세부 옵션을 지정한 뒤 확인 단추를 누릅니다.


SVG 설정 대화 상자

[파일 > 내보내기 > SVG 파일 > 내보내기 대화 상자 - 저장 단추]

  • 글자 출력 방식
    SVG 파일의 글자 출력 방식을 그대로 내보내기와 패스로 변환하기 중에서 선택합니다.
  • 인코딩
    SVG 파일의 인코딩 방식을 UTF-8 또는 로컬 인코딩 중에서 선택합니다.
    영어, 독일어, 스페인어, 이탈리아어 등 웨스턴 유럽 언어가 사용되었을 경우 로컬 인코딩을 선택할 수 있습니다. 그러나 한국어, 중국어, 일본어, 히브리어 등 로컬 인코딩 문자셋으로 표기할 수 없는 언어를 사용하였을 경우에는 유니코드인 UTF-8을 선택해야 합니다.
  • 소수 자릿수
    SVG 파일의 좌표값의 소수 자릿수를 지정합니다.
    예) 소수 자릿수를 기본값인 3으로 지정했을 경우, 100픽셀은 SVG 소스에서 100.000와 같이 표시됩니다.

UTF-8은 한 문자를 위해 2바이트를 사용하되, 널리 사용되는 문자(ASCII의 0부터 127까지)는 1바이트만 사용하도록 한 유니코드의 버전입니다.


비트맵 파일 내보내기 옵션 대화 상자

[파일 > 내보내기 > 비트맵 파일 > 내보내기 대화 상자 -파일 형식에서 BMP 파일 선택 - 저장 단추]

  • 색깔 수
    내보낼 파일의 색상을 RGB(24비트)와 팔레트(256색) 중에서 지정합니다.
  • 내보내기 영역만 저장
    선택 표시하면 내보내기 영역 크기만큼 BMP 파일로 저장됩니다. 선택 해제하면 편집 창 전체로 저장됩니다.


JPG 파일 내보내기 옵션 대화 상자

[파일 > 내보내기 > 비트맵 파일 > 내보내기 대화 상자 - 파일 형식에서 JPEG 파일 선택 - 저장 단추]

  • 품질
    압축율에 따른 품질을 1~100 % 까지 선택하여 지정합니다. 100 %는 압축을 안한 상태로 JPG 파일의 품질이 가장 좋습니다.
  • 프로그레시브
    선택 표시하면 그림이 로딩 시간에 따라 점차 나타나면서 선명해집니다.
  • 내보내기 영역만 저장
    선택 표시하면 내보내기 영역 크기만큼 JPG 파일로 저장됩니다. 선택 해제하면 편집 창 전체로 저장됩니다.


PNG 파일 내보내기 옵션 대화 상자

[파일 > 내보내기 > 비트맵 파일 > 내보내기 대화 상자 -파일 형식에서 PNG 파일 선택 - 저장 단추]

  • 인터레이스
    선택 표시하면 그림이 로딩 시간에 따라 점차 나타나면서 선명해 집니다.
  • 투명
    선택 표시하면 투명 PNG 파일로 저장됩니다.
  • 내보내기 영역만 저장
    선택 표시하면 내보내기 영역 크기만큼 PNG 파일로 저장됩니다. 선택 해제하면 편집 창 전체로 저장됩니다.


GIF 파일 내보내기 옵션 대화 상자

[파일 > 내보내기 > 비트맵 파일 > 내보내기 대화 상자 - 파일 형식에서 GIF 파일 선택 - 저장 단추]

  • 인터레이스
    웹 브라우저에서 그림을 읽어 올 때 점점 그림이 선명해집니다.
  • 투명
    투명한 GIF 파일로 저장됩니다.
  • 내보내기 영역만 저장
    선택 표시하면 내보내기 영역 크기만큼 GIF 파일로 저장됩니다. 선택 해제하면 편집 창 전체로 저장됩니다.


단축키 목록

파일 메뉴

기능 | 단축키 | 메뉴 경로 | 설명
새 문서 | Ctrl+N | 파일 > 새 문서 | 새 문서를 엽니다.
열기 | Ctrl+O | 파일 > 열기 | 하드 디스크에 저장되어 있는 문서를 엽니다.
닫기 | Ctrl+F4 | 파일 > 닫기 | 작업 중인 문서를 닫습니다.
저장하기 | Ctrl+S | 파일 > 저장하기 | 작업 문서를 저장합니다.
가져오기 | Ctrl+R | 파일 > 가져오기 | 파일을 현재 문서로 가져옵니다.
인쇄하기 | Ctrl+P | 파일 > 인쇄하기 | 작업 문서를 인쇄합니다
끝 | Alt+F4 | 파일 > 끝 | 웹캔버스를 끝냅니다.

편집 메뉴

기능 | 단축키 | 메뉴 경로 | 설명
돌이킴 | Ctrl+Z | 편집 > 돌이킴 | 마지막으로 수행한 작업을 작업 이전 상태로 돌이킵니다.
되돌이킴 | Alt+Z | 편집 > 되돌이킴 | 돌이킴 작업을 다시 되돌립니다.
자르기 | Ctrl+X | 편집 > 자르기 | 선택한 영역을 잘라냅니다.
복사하기 | Ctrl+C | 편집 > 복사하기 | 선택한 영역을 복사합니다.
붙이기 | Ctrl+V | 편집 > 붙이기 | 복사하거나 잘라낸 내용을 붙입니다.
같은 자리에 붙이기 | Ctrl+Shift+V | 편집 > 같은 자리에 붙이기 | 선택한 개체를 복사하여 같은 자리에 삽입합니다.
지우기 | Del | 편집 > 지우기 | 선택한 영역을 지웁니다.
모두 선택하기 | Ctrl+A | 편집 > 모두 선택하기 | 작업 문서의 전체 내용을 선택합니다.
선택 해제하기 | Ctrl+Shift+A | 편집 > 선택 해제하기 | 개체를 모두 선택하지 않습니다.

보기 메뉴

기능 | 단축키 | 메뉴 경로 | 설명
모두 보이기 | Ctrl+Shift+R | 보기 > 눈금자 > 모두 보이기 | 눈금자를 모두 보이게 하거나 감춥니다.
그리드 보이기 | Ctrl+Shift+I | 보기 > 그리드 > 보이기 | 그리드를 보이게 하거나 감춥니다.
그리드 끌어당김 | Ctrl+Alt+I | 보기 > 그리드 > 끌어당김 | 그리드의 끌어당김 기능을 켜거나 끕니다.
가이드 보이기 | Ctrl+Shift+E | 보기 > 가이드 > 보이기 | 가이드를 보이게 하거나 감춥니다.
가이드 끌어당김 | Ctrl+Alt+E | 보기 > 가이드 > 끌어당김 | 가이드의 끌어당김 기능을 켜거나 끕니다.
확대 | Ctrl++ | 보기 > 확대 | 문서를 확대해서 표시합니다.
축소 | Ctrl+- | 보기 > 축소 | 문서를 축소해서 표시합니다.
원래 크기로 | Ctrl+0 | 보기 > 원래 크기로 | 문서를 원래 크기로 표시합니다.
내보내기 영역 보이기 | Ctrl+Shift+X | 보기 > 내보내기 영역 > 보이기 | 내보내기 영역을 보이게 하거나 감춥니다.
브라우저에서 SVG 미리보기 | F11 | 보기 > 브라우저에서 SVG 미리보기 | SVG 파일을 브라우저로 미리 보여줍니다.

수정 메뉴

기능 | 단축키 | 메뉴 경로 | 설명
변형 반복하기 | Ctrl+D | 수정 > 변형 > 변형 반복하기 | 마지막으로 적용한 변형값을 개체에 반복 적용합니다.
이동 | Ctrl+Alt+M | 수정 > 변형 > 이동 | 개체를 이동시킵니다.
크기 조절 | Ctrl+Alt+S | 수정 > 변형 > 크기 조절 | 개체의 크기를 변경합니다.
회전/기울이기 | Ctrl+Alt+R | 수정 > 변형 > 회전/기울이기 | 개체를 회전시키거나 기울입니다.
뒤집기 | Ctrl+Alt+F | 수정 > 변형 > 뒤집기 | 축을 기준으로 개체를 뒤집습니다.
90도 회전 | Ctrl+9 | 수정 > 변형 > 90도 회전 | 개체를 90도 회전시킵니다.
180도 회전 | Ctrl+8 | 수정 > 변형 > 180도 회전 | 개체를 180도 회전시킵니다.
270도 회전 | Ctrl+7 | 수정 > 변형 > 270도 회전 | 개체를 270도 회전시킵니다.
좌우 뒤집기 | Ctrl+Alt+H | 수정 > 변형 > 좌우 뒤집기 | 개체를 좌우로 뒤집습니다.
상하 뒤집기 | Ctrl+Alt+V | 수정 > 변형 > 상하 뒤집기 | 개체를 상하로 뒤집습니다.
맨 앞으로 가져오기 | Ctrl+Shift +PageUp | 수정 > 순서 바꾸기 > 맨 앞으로 가져오기 | 개체를 맨 앞으로 가져옵니다.
앞으로 가져오기 | Ctrl+PageUp | 수정 > 순서 바꾸기 > 앞으로 가져오기 | 개체를 한 단계 앞으로 가져옵니다.
뒤로 보내기 | Ctrl+PageDn | 수정 > 순서 바꾸기 > 뒤로 보내기 | 개체를 맨 뒤로 보냅니다.
맨 뒤로 보내기 | Ctrl+Shift +PageDn | 수정 > 순서 바꾸기 > 맨 뒤로 보내기 | 개체를 한 단계 뒤로 보냅니다.
왼쪽 정렬 | Ctrl+Alt+1 | 수정 > 정렬 > 왼쪽 | 개체를 왼쪽으로 정렬합니다.
가운데 정렬 | Ctrl+Alt+2 | 수정 > 정렬 > 가운데 | 개체를 가운데로 정렬합니다.
오른쪽 정렬 | Ctrl+Alt+3 | 수정 > 정렬 > 오른쪽 | 개체를 오른쪽으로 정렬합니다.
위쪽 정렬 | Ctrl+Alt+4 | 수정 > 정렬 > 위쪽 | 개체를 위쪽으로 정렬합니다.
중간 정렬 | Ctrl+Alt+5 | 수정 > 정렬 > 중간 | 개체를 중간에 맞춰 정렬합니다.
아래쪽 정렬 | Ctrl+Alt+6 | 수정 > 정렬 > 아래쪽 | 개체를 아래쪽으로 정렬합니다.
왼쪽 배분 | Ctrl+Shift+1 | 수정 > 배분 > 왼쪽 | 개체를 왼쪽 기준으로 배분합니다.
가운데 배분 | Ctrl+Shift+2 | 수정 > 배분 > 가운데 | 개체를 가운데 기준으로 배분합니다.
오른쪽 배분 | Ctrl+Shift+3 | 수정 > 배분 > 오른쪽 | 개체를 오른쪽 기준으로 배분합니다.
위쪽 배분 | Ctrl+Shift+4 | 수정 > 배분 > 위쪽 | 개체를 위쪽 기준으로 배분합니다.
중간 배분 | Ctrl+Shift+5 | 수정 > 배분 > 중간 | 개체를 중간 기준으로 배분합니다.
아래쪽 배분 | Ctrl+Shift+6 | 수정 > 배분 > 아래쪽 | 개체를 아래쪽 기준으로 배분합니다.
수평 간격 맞추기 | Ctrl+Shift+7 | 수정 > 배분 > 수평 간격 맞추기 | 개체의 수평 간격을 맞춥니다.
수직 간격 맞추기 | Ctrl+Shift+8 | 수정 > 배분 > 수직 간격 맞추기 | 개체의 수직 간격을 맞춥니다.
너비 맞추기 | Ctrl+Alt+7 | 수정 > 같은 크기로 > 너비 맞추기 | 개체의 너비를 동일하게 맞춥니다.
높이 맞추기 | Ctrl+Alt+8 | 수정 > 같은 크기로 > 높이 맞추기 | 개체의 높이를 동일하게 맞춥니다.
너비/높이 맞추기 | Ctrl+Alt+9 | 수정 > 같은 크기로 > 너비/높이 맞추기 | 개체의 너비와 높이를 동일하게 맞춥니다.
그룹 만들기 | Ctrl+G | 수정 > 그룹 만들기 | 개체를 그룹으로 만듭니다.
그룹 풀기 | Ctrl+Shift+G | 수정 > 그룹 풀기 | 그룹 지정을 해제합니다.
패스로 변환하기 | Ctrl+Shift+O | 수정 > 패스로 변환하기 | 개체를 패스로 변환합니다.
패스 연결하기 | Ctrl+J | 수정 > 패스 > 연결하기 | 패스를 연결합니다.
마스크 만들기 | Ctrl+M | 수정 > 마스크 > 만들기 | 개체를 마스크로 만듭니다.
마스크 풀기 | Ctrl+Shift+M | 수정 > 마스크 > 풀기 | 개체에 지정한 마스크를 해제합니다.
컴파운드 패스 만들기 | Ctrl+U | 수정 > 컴파운드 패스 > 만들기 | 컴파운드 패스를 만듭니다.
컴파운드 패스 풀기 | Ctrl+Shift+U | 수정 > 컴파운드 패스 > 풀기 | 컴파운드 패스 지정을 해제합니다.
하이퍼링크 만들기 | F9 | 수정 > 하이퍼링크 > 만들기 | 하이퍼링크를 만듭니다.
하이퍼링크 지우기 | Shift+F9 | 수정 > 하이퍼링크 > 지우기 | 이미 만든 하이퍼링크를 지웁니다.

창 메뉴

기능 | 단축키 | 메뉴 경로 | 설명
작업 도구 | Alt+1 | 창 > 작업 도구 | 작업 도구를 보이게 하거나 감춥니다.
속성 | Alt+2 | 창 > 속성 | 속성 창을 보이게 하거나 감춥니다.
견본 | Alt+3 | 창 > 견본 | 견본 창을 보이게 하거나 감춥니다.
레이어 | Alt+4 | 창 > 레이어 | 레이어 창을 보이게 하거나 감춥니다.
라이브러리 | Alt+5 | 창 > 라이브러리 | 라이브러리 창을 보이게 하거나 감춥니다.

도움말 메뉴

기능 | 단축키 | 메뉴 경로 | 설명
웹캔버스 도움말 | F1 | 도움말 > 웹캔버스 도움말 | 웹캔버스 도움말을 실행합니다.


편집 도우미

각 작업 도구를 선택했을 때의 마우스 포인터 모양에 따른 기능은 다음과 같습니다.

작업 도구 |  | 세부 기능
 | 선택 도구 | 개체 위에서 <Alt>+클릭 : 개체 복사 개체 위에서 클릭 : 개체 이동 테두리 영역 조절점 위 : 개체 크기 조절 스페이스 바를 눌렀을 때 화면 이동 도구 상태로 일시 변경
 | 직접 선택 도구 | 패스 조절점 클릭 : 조절점 선택 패스 조절점 <Shift>+클릭 : 여러 개의 조절점 선택 가능 패스 조절점 클릭 후 드래그 : 조절점 이동 가능 스페이스 바를 눌렀을 때 화면 이동 도구 상태로 일시 변경
 | 펜 도구 | 패스 시작점 위에서 (패스를 닫을 수 있을 때) 패스 위에서 (조절점 추가 가능할 때) 패스 조절점 위에서 (조절점 삭제 가능할 때) <Ctrl>키를 눌렀을 때 선택 도구 상태로 일시 변경(이전에 선택 도구를 선택했을 경우) <Ctrl>키를 눌렀을 때 직접 선택 도구 상태로 일시 변경(이전에 직접 선택 도구를 선택했을 경우) 스페이스 바를 눌렀을 때 화면 이동 도구 상태로 일시 변경
 | 조절점 추가/삭제 도구 | 패스 위에서 (조절점 추가 가능할 때) 패스 조절점 위에서 (조절점 삭제 가능할 때) <Ctrl>키를 눌렀을 때 선택 도구 상태로 일시 변경(이전에 선택 도구를 선택했을 경우) <Ctrl>키를 눌렀을 때 직접 선택 도구 상태로 일시 변경(이전에 직접 선택 도구를 선택했을 경우) 스페이스 바를 눌렀을 때 화면 이동 도구 상태로 일시 변경
 | 조절점 변환 도구 | <Ctrl>키를 눌렀을 때 선택 도구 상태로 일시 변경(이전에 선택 도구를 선택했을 경우) <Ctrl>키를 눌렀을 때 직접 선택 도구 상태로 일시 변경(이전에 직접 선택 도구를 선택했을 경우) 패스 조절점 위 : Shift+클릭하면 핸들을 45도 각도로 이동 가능 스페이스 바를 눌렀을 때 화면 이동 도구 상태로 일시 변경
 | 글자 도구 | <Ctrl>키를 눌렀을 때 선택 도구 상태로 일시 변경(이전에 선택 도구를 선택했을 경우) <Ctrl>키를 눌렀을 때 직접 선택 도구 상태로 일시 변경(이전에 직접 선택 도구를 선택했을 경우) 스페이스 바를 눌렀을 때 화면 이동 도구 상태로 일시 변경
 | 글자 패스 도구
 | 타원/다각형/별/사각형/둥근 사각형 도구
 | 회전/기울이기/뒤집기/크기 조절 도구
 | 칠 속성 복사 도구
 | 칠 속성 적용 도구
 | 그라디언트 벡터 설정 도구
 | 칠 변형 도구
 | 내보내기 영역 도구
 | 패스 자르기 도구
 | 화면 이동 도구
 | 확대/축소 도구 | <Alt>+클릭 : 축소 <Ctrl>키를 눌렀을 때 선택 도구 상태로 일시 변경 (이전에 선택 도구를 선택했을 경우) <Ctrl>키를 눌렀을 때 직접 선택 도구 상태로 일시 변경(이전에 직접 선택 도구를 선택했을 경우) 스페이스 바를 눌렀을 때 화면 이동 도구 상태로 일시 변경

작업 도구 더블 클릭 기능

각 작업 도구를 더블 클릭했을 때의 기능은 다음과 같습니다.

작업 도구 |  | 더블 클릭시 기능
 | 화면 이동 도구 | 문서가 자동으로 가운데 정렬
 | 내보내기 영역 도구 | 문서 내의 모든 개체를 포함하는 크기로 설정
 | 확대/축소 도구 | 원래 크기로 설정
 | 선택 도구 | 이동 대화 상자 (개체를 선택한 상태에서만)
 | 회전 도구 | 회전/기울이기 대화 상자 (개체를 선택한 상태에서만)
 | 기울이기 도구 | 회전/기울이기 대화 상자 (개체를 선택한 상태에서만)
 | 뒤집기 도구 | 뒤집기 대화 상자(개체를 선택한 상태에서만)
 | 크기 조절 도구 | 크기 조절 대화 상자 (개체를 선택한 상태에서만)
 | 그라디언트 벡터 설정 도구 | 그라디언트 방향 초기화 (그라디언트가 적용된 개체를 선택한 상태에서만)
 | 채우기/테두리 단추 | 색깔 편집/그라디언트 편집 대화 상자


스마트 버튼이란?

스마트 버튼이란?

스마트 버튼은 나모 웹에디터에서 웹 문서를 작성할 때 사용되는 새로운 형태의 벡터 이미지입니다. 벡터 방식으로 처리되어 크기를 변경해도 그림이 깨지지 않으며 웹 문서 안에서 바로 편집할 수 있기 때문에 작업하기 편리합니다. 특히 글자가 들어간 그림에 응용되어 한 번 사용한 그림을 간단하게 글자만 바꾸거나 색깔 등의 속성만 바꾸어 재사용할 수 있습니다.

웹캔버스와 스마트 버튼

웹캔버스의 고유 파일 저장 형식은 스마트 버튼 파일(*.tng)입니다. 나모 웹에디터 4의 스마트 버튼(*.npi)을 편집하려면 가져오기 기능을 이용해야 합니다. 비트맵 파일이나 일러스트레이터 파일도 가져오기 기능으로 가져와 스마트 버튼으로 편집할 수 있습니다.

스마트 버튼 다루기

스마트 버튼은 웹 문서에서 배너, 내비게이션 버튼, 문단 제목, 장식용 표, 불릿, 수평선, 장식글 등 다양한 용도로 사용될 수 있습니다.

불릿 만들기

버튼 만들기

이미지 만들기

수평선 만들기

표 제목 만들기

배너 만들기

웹캔버스에서 만든 스마트 버튼은 나모 웹에디터로 가져와서 웹 문서 제작에 필요한 다양한 용도의 그림으로 사용할 수 있습니다.

나모 웹에디터에서 사용하기

웹캔버스 튜토리얼

나모 웹에디터 5 파워 플러스를 설치하면 프로그램 설치 폴더의 하위 폴더(WebEditor 5/doc/Tutorial)에 웹캔버스를 이용하여 버튼, 배너 등 웹 문서 제작에 필요한 요소를 만드는 과정을 제시한 튜토리얼을 추가로 제공합니다.


불릿 만들기

벡터 도형을 이용하면 웹 문서에서 불릿으로 사용할 수 있는 벡터 이미지를 손쉽게 만들 수 있습니다. 벡터 방식으로 저장되기 때문에, 이미지를 나모 웹에디터로 가져와서 웹 문서에 삽입한 이후에 크기를 변경해도 그림이 깨지지 않으며, 손쉽게 색깔을 바꿔줄 수 있습니다.

완성본 | 변형

1단계 : 새 문서 만들기

  1. 메뉴에서 [파일 > 새 문서]를 선택합니다.
  2. 새 문서 대화 상자에서 이름에 'circle'이라고 입력하고 너비, 높이, 배경색을 지정한 다음, 확인 단추를 누릅니다.
  3. 제목 막대에 'circle [시트 1] - 100%'라고 표시된 편집 창이 열립니다.

2단계 : 기본 형태 만들기

  1. 작업 도구에서 타원 [image] 도구를 선택합니다.
  2. <Shift>키를 누른 상태에서, 편집 창을 마우스로 누른 채 끌어 원을 그립니다.

3단계 : 불릿 칠하기

개체를 구 모양의 볼륨감을 갖도록 칠하려면 그라디언트를 다음과 같이 편집하여 적용하면 됩니다.

  1. 작업 도구에서 채우기 펼침 단추를 누른 다음, 그라디언트 탭에서 원하는 그라디언트를 선택합니다.
  2. 작업 도구에서 채우기 단추를 더블 클릭합니다.
  3. 그라디언트 편집 대화 상자에서 다음과 같이 지정합니다.
    • 그라디언트 종류는 [image], 방법은 [image] 으로 선택합니다.
    • 색깔을 변경하려면 색깔 조절 단추 [image] 를 먼저 선택한 다음, 색깔 단추 [image] 를 누르고 색깔 편집 대화 상자에서 원하는 색깔을 선택합니다.
  4. 작업 도구에서 그라디언트 벡터 설정 [image] 도구를 선택합니다.
  5. 원의 왼쪽 윗부분을 마우스로 누른 채 오른쪽 아래 방향으로 끌어서 그라디언트 적용선이 아래 그림과 같이 되도록 합니다.

4단계 : 그림자 만들기

  1. 작업 도구에서 타원 [image] 도구를 선택합니다.
  2. 편집 창을 마우스로 누른 채 끌어 그림자로 표시할 원을 그립니다.
  3. 작업 도구에서 회전 [image] 도구를 선택한 다음, 아래와 같은 형태로 변형시킵니다.
  4. 작업 도구에서 채우기 단추를 더블 클릭한 다음, 색깔 편집 대화 상자에서 그림자로 사용할 색깔을 선택합니다.
  5. 메뉴에서 [효과 > 가우시안 블러 효과]를 선택합니다.
  6. 가우시안 블러 효과 대화 상자에서 반지름 X/Y를 '3' 픽셀로 지정하고 확인 단추를 누릅니다.
  7. <Ctrl>키를 누른 채로 편집된 원을 마우스로 끌어서 구형 개체 아래쪽으로 이동시킵니다.
  8. 레이어 창에서 그림자 개체를 구형 개체 아래쪽으로 끌어 내려 순서를 변경합니다.
  9. 아래와 같은 형태의 불릿이 완성됩니다.

5단계 : 스마트 버튼 저장하기

  1. 메뉴에서 [파일 > 저장하기]를 선택합니다.
  2. 다른 이름으로 저장 대화 상자에서 파일 이름을 'circle'로, 파일 형식을 TNG 파일(*.tng)로 지정하고 저장 단추를 누릅니다.

웹캔버스 튜토리얼

나모 웹에디터 5 파워 플러스를 설치하면 프로그램 설치 폴더의 하위 폴더(WebEditor 5/doc/Tutorial)에 웹캔버스를 이용하여 버튼, 배너 등 웹 문서 제작에 필요한 요소를 만드는 과정을 제시한 튜토리얼을 추가로 제공합니다.


버튼 만들기

벡터 도형을 이용하면 웹 문서에서 버튼으로 사용할 수 있는 벡터 이미지를 손쉽게 만들 수 있습니다.

완성본 | 변형

1단계 : 새 문서 만들기

  1. 메뉴에서 [파일 > 새 문서]를 선택합니다.
  2. 새 문서 대화 상자에서 이름에 'button'이라고 입력하고 너비, 높이, 배경색을 지정한 다음, 확인 단추를 누릅니다.
  3. 제목 막대에 'button [시트 1] - 100%'라고 표시된 편집 창이 열립니다.

2단계 : 버튼 형태 만들기

  1. 작업 도구에서 타원 [image] 도구를 선택합니다.
  2. <Shift>키를 누른 상태에서, 편집 창을 마우스로 누른 채 끌어 원을 그립니다.
  3. 작업 도구에서 채우기 펼침 단추를 누른 다음, 그라디언트 탭에서 원하는 그라디언트를 선택합니다.
  4. 작업 도구에서 그라디언트 벡터 설정 [image] 도구를 선택합니다.
  5. 마우스로 누른 채 끌어서 그라디언트 방향을 아래와 같이 변경합니다.
  6. 작업 도구에서 테두리 단추를 누른 다음, 칠 속성 없애기 칠 속성 없애기 단추를 눌러 테두리를 없앱니다.
  7. 같은 방법으로 안쪽에 작은 원을 하나 추가하고 그라디언트 방향이 큰 원과 반대 방향이 되도록 지정합니다.
  8. 아래와 같은 형태의 버튼이 완성됩니다.

3단계 : 글자 입력하기

  1. 작업 도구에서 글자 [image] 도구를 선택합니다.
  2. 글자 대화 상자에서 내용에 'A'이라고 입력하고 글꼴과 크기를 지정한 다음, 확인 단추를 누릅니다.
  3. 작업 도구에서 채우기 펼침 단추를 누른 다음, 색깔 탭에서 원하는 색깔을 선택합니다. 원 개체의 그라디언트에서 짙은 색깔과 동일한 색을 선택합니다.
  4. 메뉴에서 [효과 > 베벨 효과]를 선택합니다.
  5. 베벨 효과 대화 상자에서 모양은 '원', 너비 '1', 색깔은 원 개체의 그라디언트에서 밝은 색깔과 동일한 색을 선택합니다.

5단계 : 스마트 버튼 저장하기

  1. 메뉴에서 [파일 > 저장하기]를 선택합니다.
  2. 다른 이름으로 저장 대화 상자에서 파일 이름을 'button', 파일 형식을 TNG 파일(*.tng)로 지정하고 저장 단추를 누릅니다.

웹캔버스 튜토리얼

나모 웹에디터 5 파워 플러스를 설치하면 프로그램 설치 폴더의 하위 폴더(WebEditor 5/doc/Tutorial)에 웹캔버스를 이용하여 버튼, 배너 등 웹 문서 제작에 필요한 요소를 만드는 과정을 제시한 튜토리얼을 추가로 제공합니다.


이미지 만들기

딩뱃 폰트를 활용하면 재미있는 모양의 버튼을 만들 수 있습니다. 딩뱃(dingbat)은 글자를 입력하듯이 그림을 입력할 수 있는 특수한 폰트를 말합니다.

완성본 | 변형

1단계 : 새 문서 만들기

  1. 메뉴에서 [파일 > 새 문서]를 선택합니다.
  2. 새 문서 대화 상자에서 이름에 'myimage'이라고 입력하고 너비, 높이, 배경색을 지정한 다음, 확인 단추를 누릅니다.
  3. 제목 막대에 'myimage [시트 1] - 100%'이라고 표시된 편집 창이 열립니다.

2단계 : 딩뱃 문자 삽입하기

  1. 작업 도구에서 글자 [image] 도구를 선택합니다.
  2. 편집 창에서 글자를 삽입할 위치를 선택한 다음, 글자 대화 상자에서 글꼴은 'Wingdings', 내용에는 '/'를 입력하고 글자 크기를 지정합니다.
  3. 작업 도구에서 채우기와 테두리 바꾸기 채우기와 테두리 바꾸기 단추를 누릅니다.
  4. 작업 도구에서 테두리 단추를 누른 다음, 칠 속성 없애기 칠 속성 없애기 단추를 눌러 테두리를 없앱니다.
  5. 작업 도구에서 채우기 펼침 단추를 누른 다음, 색깔 탭에서 원하는 색깔을 선택합니다.

3단계 : 도형 삽입하기

  1. 작업 도구에서 타원 [image] 도구를 선택합니다.
  2. <Shift>키를 누른 상태에서, 편집 창을 마우스로 누른 채 끌어 원을 그립니다.

  3. 작업 도구에서 채우기와 테두리 바꾸기 채우기와 테두리 바꾸기 단추를 누릅니다.
  4. 속성 창 테두리 탭에서 두께를 '3'으로 지정합니다.
  5. 메뉴에서 [효과 > 그림자 효과]를 선택합니다.
  6. 그림자 효과 대화 상자에서 상대 위치 X, Y, 번짐 반경을 '2'로 지정합니다.
  7. <Ctrl>키를 누른 채로 원 개체를 마우스로 끌어서 딩뱃 문자가 가운데 들어가게 합니다.
  8. 다음과 같은 이미지가 완성됩니다.

3단계 : 스마트 버튼 저장하기

  1. 메뉴에서 [파일 > 저장하기]를 선택합니다.
  2. 다른 이름으로 저장 대화 상자에서 파일 이름을 'myimage'로, 파일 형식을 TNG 파일(*.tng)로 지정하고 저장 단추를 누릅니다.

스마트 버튼(*.tng) 파일 형식을 이용하면 삽입된 글자가 그림으로 처리되기 때문에 기본 폰트가 아닌 특수한 폰트도 자유롭게 사용할 수 있습니다.

웹캔버스 튜토리얼

나모 웹에디터 5 파워 플러스를 설치하면 프로그램 설치 폴더의 하위 폴더(WebEditor 5/doc/Tutorial)에 웹캔버스를 이용하여 버튼, 배너 등 웹 문서 제작에 필요한 요소를 만드는 과정을 제시한 튜토리얼을 추가로 제공합니다.


수평선 만들기

패스 또는 벡터 도형을 이용하면 웹 문서에서 자주 사용되는 수평선 이미지를 손쉽게 만들 수 있습니다. 벡터형으로 만들어지므로 나모 웹에디터 편집 창에서 크기를 변경해도 그림이 깨지지 않습니다.

완성본

변형

1단계 : 새 문서 만들기

  1. 메뉴에서 [파일 > 새 문서]를 선택합니다.
  2. 새 문서 대화 상자에서 이름에 'horizon'이라고 입력하고 너비, 높이, 배경색을 지정한 다음, 확인 단추를 누릅니다.
  3. 제목 막대에 'horizon [시트 1] - 100%'이라고 표시된 편집 창이 열립니다.

2단계 : 수평선 형태 만들기

  1. 작업 도구에서 펜 [image] 도구를 선택합니다.
  2. 편집 창에서 수평선 시작점을 클릭한 다음, <Shift>키를 누른 채로 끝점을 클릭합니다.
  3. 속성 창의 테두리 탭에서 두께는 '5', 모양은 '짧은 대시'로 지정합니다.
  4. 작업 도구에서 테두리 펼침 단추를 누른 다음, 그라디언트 탭에서 원하는 그라디언트를 선택합니다.
  5. 작업 도구에서 선택 [image] 도구를 선택합니다.
  6. 수평선의 길이를 원하는 크기로 조절합니다.
  7. 아래와 같은 형태의 수평선이 완성됩니다.

3단계 : 스마트 버튼 저장하기

  1. 메뉴에서 [파일 > 저장하기]를 선택합니다.
  2. 다른 이름으로 저장 대화 상자에서 파일 이름을 'horizon'로, 파일 형식을 TNG 파일(*.tng)로 지정하고 저장 단추를 누릅니다.

웹캔버스 튜토리얼

나모 웹에디터 5 파워 플러스를 설치하면 프로그램 설치 폴더의 하위 폴더(WebEditor 5/doc/Tutorial)에 웹캔버스를 이용하여 버튼, 배너 등 웹 문서 제작에 필요한 요소를 만드는 과정을 제시한 튜토리얼을 추가로 제공합니다.


표 제목 만들기

표 제목 이미지를 스마트 버튼으로 만들면, 공지 사항 등을 표시할 때 사용 가능한 장식용 표를 쉽게 편집하여 완성시킬 수 있습니다. 표 제목은 위/아래 이미지가 하나의 세트를 구성하도록 만들어야 합니다.

완성본

변형

1단계 : 새 문서 만들기

  1. 메뉴에서 [파일 > 새 문서]를 선택합니다.
  2. 새 문서 대화 상자에서 이름에 'table'이라고 입력하고 너비, 높이, 배경색을 지정한 다음, 확인 단추를 누릅니다.
  3. 제목 막대에 'table [시트 1] - 100%'이라고 표시된 편집 창이 열립니다.

2단계 : 장식용 표 테두리 만들기

  1. 작업 도구에서 둥근 사각형 [image] 도구를 선택합니다.
  2. 편집 창에서 둥근 사각형을 삽입할 위치를 마우스로 누른 채 끌어서 둥근 사각형을 그립니다. 도구 옵션을 이용하면 사각형 모서리의 둥근 정도를 조절하여 그릴 수 있습니다.
  3. 작업 도구에서 테두리 펼침 단추를 누른 다음, 색깔 탭에서 원하는 색깔을 선택합니다.
  4. 속성 창의 테두리 탭에서 두께를 '3'으로 지정합니다.

3단계 : 스마트 버튼 저장하기

  1. 작업 도구에서 내보내기 영역 [image] 도구를 더블 클릭합니다. 둥근 사각형을 포함하는 최소 영역으로 내보내기 영역이 자동 설정됩니다.
  2. 내보내기 영역의 크기 조절점을 누른 채 끌어서, 둥근 사각형의 위쪽 부분만 선택합니다. 표 제목 이미지 중에서 위쪽 이미지로 저장할 부분입니다.
  3. 메뉴에서 [파일 > 저장하기]를 선택합니다.
  4. 다른 이름으로 저장 대화 상자에서 파일 이름을 'table-top'으로, 파일 형식을 TNG 파일(*.tng)로 지정하고 저장 단추를 누릅니다.
  5. 작업 도구에서 내보내기 영역 [image] 도구를 더블 클릭합니다.
  6. 내보내기 영역의 크기 조절점을 누른 채 끌어서, 둥근 사각형의 아래쪽 부분만 선택합니다. 표 제목 이미지 중에서 아래쪽 이미지로 저장할 부분입니다.
  7. 메뉴에서 [파일 > 저장하기]를 선택합니다.
  8. 다른 이름으로 저장 대화 상자에서 파일 이름을 'table-bottom'으로, 파일 형식을 TNG 파일(*.tng)로 지정하고 저장 단추를 누릅니다.

<참고> 표 제목 이미지로 장식용 표 완성하기

나모 웹에디터에서 장식용 표를 만드는 방법은 다음과 같습니다.

  1. 나모 웹에디터 편집 창에서 3x1의 표를 만듭니다.
  2. 표의 테두리를 '0'으로 지정하여 테두리가 보이지 않게 합니다.
  3. 표의 위쪽 셀과 아래쪽 셀에 짝을 이루는 표 제목 이미지를 삽입합니다.
  4. 표에서 가운데 셀의 배경색을 스마트 버튼 색깔과 같은 색으로 지정합니다.
  5. 표의 가운데 셀에 1x1의 아기표를 삽입합니다.
  6. 아기표의 테두리 선 두께를 '0'으로 지정하여 테두리가 보이지 않게 하고, 배경색을 흰색, 정렬을 가운데로 지정합니다.
  7. 아기표의 오른쪽 경계선을 마우스로 누른 채 끌어서 장식용 표 옆선을 원하는 두께로 조절합니다.
  8. 아기표 안에 내용을 채워 넣습니다.

웹캔버스 튜토리얼

나모 웹에디터 5 파워 플러스를 설치하면 프로그램 설치 폴더의 하위 폴더(WebEditor 5/doc/Tutorial)에 웹캔버스를 이용하여 버튼, 배너 등 웹 문서 제작에 필요한 요소를 만드는 과정을 제시한 튜토리얼을 추가로 제공합니다.


배너 만들기

패턴과 레이어 모드를 이용하여, 웹 문서를 제작할 때 문서 제목으로 사용하는 배너를 손쉽게 만들 수 있습니다.

완성본

변형

1단계 : 새 문서 만들기

  1. 메뉴에서 [파일 > 새 문서]를 선택합니다.
  2. 새 문서 대화 상자에서 이름에 'banner'라고 입력하고 너비, 높이, 배경색을 지정한 다음, 확인 단추를 누릅니다.
  3. 제목 막대에 'banner [시트 1] - 100%'라고 표시된 편집 창이 열립니다.

2단계 : 배너 형태 만들기

  1. 작업 도구에서 사각형 [image] 도구를 선택합니다.
  2. 편집 창에서 사각형의 왼쪽 위 꼭지점에 해당하는 위치를 마우스로 누른 채 끌어서 사각형을 그립니다.
  3. 작업 도구에서 채우기 펼침 단추를 누른 다음, 패턴 탭에서 원하는 패턴을 선택합니다.
  4. 작업 도구에서 테두리 단추를 누른 다음, 칠 속성 없애기 칠 속성 없애기 단추를 눌러 테두리를 없앱니다.
  5. 레이어 창에서 하위 메뉴 [image] 단추를 누르고 개체 복사하기를 선택합니다.
  6. 작업 도구에서 채우기 펼침 단추를 누른 다음, 그라디언트 탭에서 원하는 그라디언트를 선택합니다.
  7. 레이어 창에서 레이어 혼합 모드를 '스크린'으로 변경합니다.
  8. 레이어 혼합 모드가 적용되어, 개체가 아래와 같은 형태로 표시됩니다.
  9. <Ctrl+A>키를 눌러 개체를 모두 선택합니다.
  10. 메뉴에서 [수정 > 그룹 만들기]를 선택합니다.
  11. 메뉴에서 [효과 > 색상/채도]를 선택합니다.
  12. 색상/채도 대화 상자에서 색상 회전을 '70도', 채도를 '80%'로 지정합니다.

3단계 : 글자 입력하기

  1. 작업 도구에서 글자 [image] 도구를 선택합니다.
  2. 편집 창에서 글자를 삽입할 위치를 선택한 다음, 글자 대화 상자에서 내용에 'Photo Album'이라고 입력하고 글꼴과 글자 크기를 지정합니다.
  3. 작업 도구에서 채우기 펼침 단추를 누른 다음, 색깔 탭에서 배너의 배경색과 비슷한 색깔을 선택합니다.
  4. 메뉴에서 [효과 > 그림자 효과]를 선택합니다.
  5. 그림자 효과 대화 상자에서 종류는 '안쪽 그림자', 상대 위치 X, Y, 번짐 반경은 '2'로 지정합니다.
  6. 아래와 같은 형태의 배너가 완성됩니다.

4단계 : 스마트 버튼 저장하기

  1. 메뉴에서 [파일 > 저장하기]를 선택합니다.
  2. 다른 이름으로 저장 대화 상자에서 파일 이름을 'banner'로, 파일 형식을 TNG 파일(*.tng)로 지정하고 저장 단추를 누릅니다.

웹캔버스 튜토리얼

나모 웹에디터 5 파워 플러스를 설치하면 프로그램 설치 폴더의 하위 폴더(WebEditor 5/doc/Tutorial)에 웹캔버스를 이용하여 버튼, 배너 등 웹 문서 제작에 필요한 요소를 만드는 과정을 제시한 튜토리얼을 추가로 제공합니다.


나모 웹에디터에서 사용하기

웹캔버스에서 스마트 버튼(*.tng) 파일 형식으로 저장하여 만든 벡터 이미지는 나모 웹에디터로 가져와서 활용할 수 있습니다.

나모 웹에디터로 가져오기

  1. 나모 웹에디터를 실행합니다.
  2. 메뉴에서 [창 > 리소스 관리자]를 선택합니다.
  3. 리소스 관리자에서 스마트 버튼 탭을 열고 왼쪽 목록에서 내 리소스 폴더를 선택합니다.
  4. 리소스 관리자의 메뉴 단추를 누르고 [가져오기]를 선택합니다.
  5. 열기 대화 상자에서 웹캔버스에서 만든 스마트 버튼 파일을 지정하고 열기 단추를 누릅니다.
  6. 지정한 스마트 버튼이 추가되어 오른쪽에 미리보기가 나타납니다.
  7. 스마트 버튼을 문서에 삽입하려면, 원하는 버튼을 미리보기에서 선택하고 삽입 단추를 누릅니다.
  8. 닫기 단추를 누릅니다.

나모 웹에디터에서 편집하기

나모 웹에디터에서 웹 문서에 삽입한 스마트 버튼은 편집 창에서 바로 크기를 조절할 수 있습니다. 벡터 방식으로 처리되었기 때문에 크기를 확대하거나 축소해도 그림이 깨지지 않습니다.

스마트 버튼의 색깔, 글자 등의 속성을 변경하려면 삽입한 버튼을 더블 클릭합니다. 웹캔버스가 바로 실행되어 개체의 속성을 편집할 수 있습니다.

웹캔버스 편집 창에 열려 있는 버튼을 마우스로 누른 채 끌어서 나모 웹에디터의 편집 창 또는 리소스 관리자에 가져다 놓으면 스마트 버튼을 빠르게 추가할 수 있습니다.

웹캔버스 튜토리얼

나모 웹에디터 5 파워 플러스를 설치하면 프로그램 설치 폴더의 하위 폴더(WebEditor 5/doc/Tutorial)에 웹캔버스를 이용하여 버튼, 배너 등 웹 문서 제작에 필요한 요소를 만드는 과정을 제시한 튜토리얼을 추가로 제공합니다.


롤오버 스마트 버튼이란?

롤오버 스마트 버튼

롤오버 스마트 버튼은 3개의 스마트 버튼(보통 버튼, 롤오버 버튼, 강조 버튼)으로 구성된 스마트 버튼셋을 말합니다. 웹캔버스를 이용하면 특정 이름(Normal, Rollover, Highlight)으로 지정된 3개의 시트로 버튼셋을 구성하여 롤오버 스마트 버튼을 만들 수 있습니다.

보통 버튼 | 보통 상태에서 표시되는 버튼, 시트 이름을 'Normal'로 지정해야 함.
롤오버 버튼 | 마우스 포인터를 올려 놓았을 때 표시되는 버튼, 시트 이름을 'Rollover'로 지정해야 함.
강조 버튼 | 내비게이션 바에서 현재 페이지를 표시하는 버튼, 시트 이름을 'Highlight'로 지정해야 함.

롤오버 스마트 버튼 만들기 예제

롤오버 스마트 버튼과 내비게이션 바

롤오버 스마트 버튼은 나모 웹에디터에서 만든 웹 사이트의 내비게이션 바에 사용됩니다. 내비게이션 바에 롤오버 스마트 버튼을 사용하면, 버튼에 사용된 글자가 사이트 구조에 맞는 내비게이션 이름으로 자동 변경됩니다. 또한 사이트 구조를 바꾸면 그에 맞게 자동으로 업데이트됩니다.

롤오버 스마트 버튼은 최소한 1개 이상의 글자 개체를 포함하고 있어야 합니다. 만일 2개 이상의 글자 개체가 사용되었을 때는 레이어 목록에서 가장 위에 있는 글자 개체가 내비게이션 이름을 표시하기 위해 사용되고 나머지 글자 개체는 내비게이션 이름과 관계없이 모두 동일하게 표시됩니다.

내비게이션 바에 롤오버 스마트 버튼 사용하기

웹캔버스 튜토리얼

나모 웹에디터 5 파워 플러스를 설치하면 프로그램 설치 폴더의 하위 폴더(WebEditor 5/doc/Tutorial)에 웹캔버스를 이용하여 버튼, 배너 등 웹 문서 제작에 필요한 요소를 만드는 과정을 제시한 튜토리얼을 추가로 제공합니다.


롤오버 스마트 버튼 만들기

롤오버 스마트 버튼은 먼저 보통 버튼을 만든 다음, 이것을 복사하고 편집하여 롤오버 버튼, 강조 버튼을 만들어 완성할 수 있습니다. 롤오버 스마트 버튼을 만드는 방법은 다음과 같습니다.

새 문서 만들기

  1. 메뉴에서 [파일 > 새 문서]를 선택합니다.
  2. 새 문서 대화 상자에서 이름에 'MyRollover'라고 입력하고 확인 단추를 누릅니다.
  3. 제목 막대에 'MyRollover'라고 표시된 편집 창이 나타납니다.

기본 개체 만들기

  1. 작업 도구에서 사각형 [image] 도구를 선택합니다.
  2. 캔버스에서 사각형의 한쪽 꼭지점에 해당하는 위치를 마우스로 누른 채 끌어서 사각형을 그립니다.
  3. 견본 창의 색깔 탭에서 채우기에 적용 [image] 을 누르고 원하는 색깔을 선택하여 사각형의 채우기 영역을 칠합니다.
  4. 속성 창의 테두리 탭에서 두께를 '2'로 지정합니다. 사각형을 둘러싸고 있던 테두리가 2픽셀로 바뀝니다.
  5. 견본 창의 색깔 탭에서 테두리에 적용 [image] 을 누르고 원하는 색깔을 선택하여 테두리를 칠합니다. 색깔 탭에 원하는 색깔이 없을 때는 색깔 탭에 있는 항목을 더블 클릭한 다음, 색깔 편집 대화 상자에서 세밀하게 색깔을 지정할 수 있습니다.

글자 개체 삽입하기

  1. 작업 도구에서 글자 [image] 도구를 선택합니다.
  2. 문서에서 사각형 개체의 안쪽을 클릭합니다.
  3. 글자 대화 상자에서 내용에 '텍스트'라고 입력하고, 글꼴은 '바탕체', 크기는 '11'로 지정하고 확인 단추를 누릅니다.
  4. 견본 창의 색깔 탭에서 채우기에 적용 [image] 을 누르고 흰색을 선택하여 글자를 칠합니다.

시트 이름 변경하기

이제 롤오버 스마트 버튼셋을 구성하는 3개의 시트를 만들기 위해 작업한 시트를 복사하고 정해진 이름을 지정할 차례입니다.

  1. 레이어 창에서 시트 탭을 선택합니다.
  2. 시트 목록에서 '시트 1'을 더블 클릭합니다.
  3. 이름 바꾸기 대화 상자에서 이름에 'Normal'이라고 입력하고 확인 단추를 누릅니다.
  4. 레이어 창에서 시트 탭을 선택합니다.
  5. 시트 목록에서 'Normal' 시트를 선택합니다.
  6. 하위 메뉴 단추를 누르고 [복사하기]를 선택합니다.
  7. 'Normal' 시트가 복사되어 시트 목록의 아래쪽에 나타나면 복사된 'Normal' 시트를 더블 클릭합니다.
  8. 이름 바꾸기 대화 상자에서 이름에 'Rollover'라고 입력하고 확인 단추를 누릅니다.
  9. 다시 한 번 시트 하위 메뉴 단추를 누르고 [복사하기]를 선택합니다.
  10. 'Rollover' 시트가 복사되어 시트 목록의 아래쪽에 나타나면 복사된 'Rollover' 시트를 더블 클릭합니다.
  11. 이름 바꾸기 대화 상자에서 이름에 'Highlight'라고 입력하고 확인 단추를 누릅니다.

롤오버 버튼 편집하기

이제 롤오버 스마트 버튼에서 마우스 포인터를 올려 놓았을 때 표시될 롤오버 버튼을 편집할 차례입니다.

  1. 레이어 창의 시트 탭에서 'Rollover' 시트를 선택합니다.
  2. 작업 도구에서 선택 [image] 도구를 선택합니다.
  3. 문서에서 사각형 개체를 선택합니다.
  4. 견본 창의 색깔 탭에서 채우기에 적용 [image] 을 누르고 원하는 색깔을 선택합니다. 'Normal' 시트에서 지정한 사각형 색깔보다 한 단계 밝은 색을 선택하였습니다.

강조 버튼 편집하기

마지막으로 강조 버튼을 편집할 차례입니다. 강조 버튼은 내비게이션 바에서 현재 페이지를 표시하는 버튼입니다. 현재 페이지를 다른 색깔 또는 모양으로 표시해 주지 않으려면 보통 버튼을 복사한 것을 편집하지 않고 그대로 강조 버튼으로 사용하면 됩니다.

  1. 레이어 창의 시트 탭에서 'Highlight' 시트를 선택합니다.
  2. 작업 도구에서 선택 [image] 도구를 선택합니다.
  3. 문서에서 사각형 개체를 선택합니다.
  4. 견본 창의 색깔 탭에서 채우기에 적용 [image] 을 누르고 원하는 색깔을 선택합니다. 'Normal' 시트에서 지정한 사각형 색깔보다 한 단계 어두운 색을 선택하였습니다.

롤오버 스마트 버튼 저장하기

  1. 메뉴에서 [파일 > 저장하기]을 선택합니다.
  2. 다른 이름으로 저장 대화 상자에서 파일 이름을 'MyRollover'로 지정하고 확인 단추를 누릅니다. 편집 창을 열 때 지정한 이름이 파일 이름에 표시됩니다. 롤오버 스마트 버튼은 일반 스마트 버튼과 동일한 확장자인 *.tng 파일로 저장됩니다.

웹캔버스 튜토리얼

나모 웹에디터 5 파워 플러스를 설치하면 프로그램 설치 폴더의 하위 폴더(WebEditor 5/doc/Tutorial)에 웹캔버스를 이용하여 버튼, 배너 등 웹 문서 제작에 필요한 요소를 만드는 과정을 제시한 튜토리얼을 추가로 제공합니다.


내비게이션 바에 삽입하기

롤오버 스마트 버튼은 나모 웹에디터에서 만든 웹 사이트의 내비게이션 바에 사용됩니다. 웹캔버스로 만든 롤오버 스마트 버튼을 나모 웹에디터에서 활용하려면 먼저 나모 웹에디터에서 내비게이션 바가 삽입된 사이트를 만들어야 합니다. 롤오버 스마트 버튼을 내비게이션 바에 적용하는 방법은 다음과 같습니다.

사이트 열기

  1. 나모 웹에디터에서 사이트 파일을 엽니다.
  2. 사이트를 구성하는 파일 중에서 내비게이션 바가 삽입된 문서를 편집 창에 엽니다.

사이트와 내비게이션 바에 관련된 자세한 설명은 나모 웹에디터 도움말을 참고하시기 바랍니다.

내비게이션 바에 롤오버 스마트 버튼 삽입하기

  1. 문서에 삽입된 내비게이션 바를 더블 클릭합니다.
  2. 내비게이션 바 속성 대화 상자가 나타나면 모양 그룹에서 스마트 버튼을 선택하고 [image] 단추를 누릅니다.
  3. 리소스 관리자 왼쪽 목록에서 내 리소스 폴더를 선택합니다.
  4. 리소스 관리자의 메뉴 단추를 누르고 [가져오기]를 선택합니다.
  5. 열기 대화 상자에서 웹캔버스에서 만든 롤오버 스마트 버튼 'MyRollover.tng'을 지정하고 열기 단추를 누릅니다.
  6. 리소스 관리자에 앞에서 지정한 롤오버 스마트 버튼이 추가됩니다. 오른쪽 미리보기에서 새로 추가된 스마트 버튼을 선택하고 확인 단추를 누릅니다.
  7. 내비게이션 바 속성 대화 상자에서 확인 단추를 누릅니다.
  8. 편집 창에 삽입된 내비게이션 바의 모양이 새로 지정한 롤오버 스마트 버튼으로 바뀌어 나타납니다.

완성된 형태 보기

예) 수평 내비게이션 바의 경우

롤오버 버튼 보통 버튼 강조 버튼

예) 수직 내비게이션 바의 경우

웹캔버스 튜토리얼

나모 웹에디터 5 파워 플러스를 설치하면 프로그램 설치 폴더의 하위 폴더(WebEditor 5/doc/Tutorial)에 웹캔버스를 이용하여 버튼, 배너 등 웹 문서 제작에 필요한 요소를 만드는 과정을 제시한 튜토리얼을 추가로 제공합니다.


SVG란?

SVG란?

SVG는 W3C(World Wide Web Consortium)에 의해 제안된 XML 그래픽 표준으로, XML의 개방성과 상호운용성 등의 장점을 수용하여 그래픽의 활용 범위를 확대할 수 있도록 만들어진 벡터 그래픽입니다.

웹캔버스와 SVG

웹캔버스는 SVG 표준에 기반을 두고 만들어진 벡터 방식의 웹 그래픽 저작 도구로서, 작업한 결과물을 SVG 파일로 내보내어 저장할 수 있습니다.

SVG 미리보기 설정

브라우저에서 SVG 미리보기

SVG로 내보내기

웹 브라우저로 확인하기

웹캔버스 튜토리얼

나모 웹에디터 5 파워 플러스를 설치하면 프로그램 설치 폴더의 하위 폴더(WebEditor 5/doc/Tutorial)에 웹캔버스를 이용하여 버튼, 배너 등 웹 문서 제작에 필요한 요소를 만드는 과정을 제시한 튜토리얼을 추가로 제공합니다.


SVG로 내보내기

SVG는 XML의 개방성, 상호 운용성 등의 장점을 벡터 그래픽에 수용한 XML 그래픽 표준입니다. 웹캔버스에서 작업한 결과물은 SVG 파일로 출력할 수 있습니다.

샘플

새 문서 만들기

  1. 메뉴에서 [파일 > 새 문서]를 선택합니다.
  2. 새 문서 대화 상자에서 이름에 'svg'이라고 입력하고 확인 단추를 누릅니다.
  3. 제목 막대에 'svg'라고 표시된 편집 창이 나타납니다.

기본 개체 만들기

  1. 작업 도구에서 사각형 [image] 도구를 선택합니다.
  2. 캔버스에서 사각형을 삽입할 위치를 마우스로 누른 채 끌어서 사각형을 그립니다.
  3. 견본 창의 색깔 탭에서 원하는 색깔을 선택합니다. 사각형 내부가 지정한 색깔로 칠해집니다.
  4. 속성 창의 테두리 탭에서 두께를 '5'로 지정합니다.
  5. 레이어 창의 레이어 탭에서 사각형 개체의 불투명도를 50%로 지정합니다.
  6. 메뉴에서 [효과 > 가우시안 블러 효과]를 선택합니다.
  7. 가우시안 블러 효과 대화 상자에서 반지름 X/Y를 3.0 픽셀로 지정하고 확인 단추를 누릅니다.

글자 개체 삽입하기

  1. 작업 도구에서 글자 [image] 도구를 선택합니다.
  2. 편집 창에서 글자를 삽입할 위치를 클릭합니다.
  3. 글자 대화 상자에서 내용에 'SVG'라고 입력하고, 글꼴은 'Verdana', 크기는 '25'로 지정하고 확인 단추를 누릅니다.
  4. 라이브러리 창의 스타일 탭에서 원하는 항목을 선택하여, 글자에 스타일을 적용시킵니다.

SVG 파일로 내보내기

  1. 메뉴에서 [파일 > 내보내기 > SVG 파일]을 선택합니다.
  2. 내보내기 대화 상자에서 파일 이름을 'sample'로, 파일 형식을 SVG 파일(*.svg)로 지정하고 저장 단추를 누릅니다.
  3. SVG 설정 대화 상자에서 글자 출력 방식은 '그대로 내보내기', 인코딩은 '로컬 인코딩'으로 지정하고 확인 단추를 누릅니다. 글자는 그대로 내보내기로 내보내거나 패스로 변환하기하여 내보낼 수 있습니다.

SVG 파일은 SVG Viewer가 설치된 웹 브라우저에서 내용을 확인할 수 있습니다.

웹캔버스 튜토리얼

나모 웹에디터 5 파워 플러스를 설치하면 프로그램 설치 폴더의 하위 폴더(WebEditor 5/doc/Tutorial)에 웹캔버스를 이용하여 버튼, 배너 등 웹 문서 제작에 필요한 요소를 만드는 과정을 제시한 튜토리얼을 추가로 제공합니다.


웹 브라우저로 확인하기

웹캔버스에서 SVG 파일로 내보낸 파일은 웹 브라우저로 읽어 들일 수 있습니다. 단, 웹 브라우저가 SVG 파일을 그려서 보여줄 수 있도록 웹 브라우저에 플러그인을 설치해야 합니다. SVG Viewer 플러그인은 인터넷에 연결된 상태에서는 Adobe 웹 사이트에서 내려 받으실 수 있습니다.

웹 브라우저로 확인하기

  1. Windows 탐색기에서 SVG 파일로 저장한 파일을 더블 클릭합니다.
  2. 웹 브라우저가 실행되고 파일이 열립니다.
  3. <Alt>키를 누른 상태에서 마우스로 SVG 이미지를 누른 채 끌면, 웹 브라우저 상에서 이미지의 위치를 옮길 수 있습니다.
  4. <Ctrl>키를 누른 상태에서 웹 브라우저 창을 클릭하면 마우스 포인터가 있는 위치에서 확대됩니다. <Ctrl>키를 누른 상태에서 원하는 영역을 마우스로 누른 채 끌면 선택한 영역이 확대됩니다.
  5. SVG 이미지를 축소하려면 <Ctrl>와 <Shift>키를 누른 상태에서 웹 브라우저 창을 클릭합니다.

웹캔버스 튜토리얼

나모 웹에디터 5 파워 플러스를 설치하면 프로그램 설치 폴더의 하위 폴더(WebEditor 5/doc/Tutorial)에 웹캔버스를 이용하여 버튼, 배너 등 웹 문서 제작에 필요한 요소를 만드는 과정을 제시한 튜토리얼을 추가로 제공합니다.


조절점 추가 도구

조절점 추가 도구는 패스 개체에 조절점을 추가합니다.


조절점 변환 도구

조절점 변환 도구는 곡선 조절점을 직선 조절점으로, 직선 조절점을 곡선 조절점으로 바꿉니다.


기본색 적용 단추

기본색 적용 단추는 선택한 개체의 채우기 또는 테두리를 기본 색깔인 흰색(#FFFFFF)으로 바꿉니다.


기본 그라디언트 적용 단추

기본 그라디언트 적용 단추는 선택한 개체의 채우기 또는 테두리를 기본 그라디언트로 바꿉니다.


조절점 삭제 도구

조절점 삭제 도구는 패스 개체에서 조절점을 삭제합니다.


직접 선택 도구

직접 선택 도구는 패스 개체의 조절점을 선택하거나 조절점의 위치를 옮깁니다.


타원 도구

타원 도구는 원 또는 다양한 형태의 타원을 그립니다.


칠 속성 없애기 단추

칠 속성 없애기 단추는 채우기나 테두리의 칠 속성을 없앱니다.


내보내기 영역 도구

내보내기 영역 도구는 그림을 저장하거나 내보냈을 때 표시하게 할 영역을 설정합니다.


채우기 단추

채우기 단추는 개체의 채우기 칠 속성을 지정하거나 변경할 때 사용합니다. 색깔, 그라디언트, 패턴 탭에서 원하는 항목을 선택할 수 있습니다.


뒤집기 도구

뒤집기 도구는 선택한 개체를 좌우, 상하로 뒤집습니다.


그라디언트 벡터 설정 도구

그라디언트 벡터 설정 도구는 그라디언트가 적용된 개체에서 그라디언트의 시작점과 끝점을 설정합니다.


칠 속성 적용 도구

칠 속성 적용 도구는 채우기/테두리 단추에 복사된 칠 속성을 선택한 개체에 적용합니다.


칠 변형 도구

칠 변형 도구는 그라디언트와 패턴으로 칠한 개체의 칠하기 형태를 변형시킵니다.


펜 도구

펜 도구는 직선 또는 곡선 형태의 패스 개체를 그립니다.


다각형 도구

다각형 도구는 다각형 모양의 도형을 그립니다. 꼭지점 개수를 지정할 수 있습니다.


사각형 도구

사각형 도구는 사각형 모양의 도형을 그립니다.


크기 조절 도구

크기 조절 도구는 선택한 개체의 크기를 조절합니다.


회전 도구

회전 도구는 선택한 개체를 원하는 각도로 회전시킵니다.


둥근 사각형 도구

둥근 사각형 도구는 모서리가 둥근 사각형 모양의 도형을 그립니다.


패스 자르기 도구

패스 자르기 도구는 패스 개체를 원하는 모양으로 자릅니다.


화면 이동 도구

화면 이동 도구는 개체를 편집하기 쉽도록 편집 창에 보이는 문서를 위치를 변경합니다.


선택 도구

선택 도구는 개체를 선택하거나 개체의 위치를 이동시킵니다.


칠 속성 초기화 단추

칠 속성 초기화 단추는 선택한 개체의 채우기와 테두리 칠 속성을 기본값으로 변경합니다. 채우기 기본값은 흰색(#FFFFFF), 테두리 기본값은 검정색(#000000)입니다.


기울이기 도구

기울이기 도구는 선택한 개체를 기울입니다.


칠 속성 복사 도구

칠 속성 복사 도구는 이미 편집한 개체의 칠 속성을 채우기/테두리 단추에 복사합니다.


별 도구

별 도구는 별 모양의 도형을 그립니다. 꼭지점 개수를 지정할 수 있습니다.


테두리 단추

테두리 단추는 개체의 테두리 칠 속성을 지정하거나 변경할 때 사용합니다. 색깔, 그라디언트, 패턴 탭에서 원하는 항목을 선택할 수 있습니다.


채우기와 테두리 바꾸기 단추

채우기와 테두리 바꾸기 단추는 개체의 채우기와 테두리의 칠 속성을 서로 바꿉니다.


글자 도구

글자 도구는 글자 개체를 삽입합니다. 글자의 글꼴, 크기, 방향 등을 설정할 수 있습니다.


글자 패스 도구

글자 패스 도구는 패스 개체의 굴곡에 따라 자유롭게 글자를 입력하는 글자 패스를 만듭니다.


확대/축소 도구

확대/축소 도구는 개체를 확대/축소시켜 보여줍니다.